自带计时器组件，反应，回流不工作

own timer component with react, reflux not working

本文关键字：工作 反应 计时器 组件      更新时间：2023-09-26

我试着习惯回流和分叉的例子回购。我的完整代码在这里[https://github.com/svenhornberg/react-starterkit]

我想创建一个计时器组件，从时间存储中获取当前时间，但它不工作。DevTools没有显示任何错误。这一定是一些新手的错误，但我没有发现它们。

Edit1: I add a line in home//Edit1

Edit2:我认为错误可能是在componentDidMount在home.jsx

修正我需要触发我的时间，看看我的答案。

import Reflux from 'reflux';
import TimeActions from '../actions/timeActions';
var TimeStore = Reflux.createStore({
    listenables: timeActions,
    init() {
        this.time = '';
    },
    onCurrenttime() {
        this.time = '13:47';
    }
});

export default TimeStore;

<<p> 操作/strong> 
import Reflux from 'reflux';
var TimeActions = Reflux.createActions([
  'currenttime'
]);
export default TimeActions;
<<p> 组件/strong> 
import React from 'react';
class Timer extends React.Component {
  constructor(){
    super();    
  }
  render() {
    var time = this.props.time;
    return (
      <div>
        { time }
      </div>
    );
  }
}
Timer.propTypes = {
  time : React.PropTypes.string
}
export default Timer;

我想使用定时器组件在home.jsx

import React from 'react';
import ItemList from '../components/itemList.jsx';
import ItemStore from '../stores/itemStore';
import ItemActions from '../actions/itemActions';
import Timer from '../components/timer.jsx';
import TimeStore from '../stores/timeStore';
import TimeActions from '../actions/timeActions';
class Home extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      items : [],
      loading: false,
      time : '' //edit1
    };
  }
  componentDidMount() {
    this.unsubscribe = ItemStore.listen(this.onStatusChange.bind(this));
    this.unsubscribe = TimeStore.listen(this.onStatusChange.bind(this));
    ItemActions.loadItems();
    TimeActions.currenttime();
  }
  componentWillUnmount() {
    this.unsubscribe();
  }
  onStatusChange(state) {
    this.setState(state);
  }
  render() {
    return (
      <div>
        <h1>Home Area</h1>
        <ItemList { ...this.state } />
        <Timer { ...this.state } />
      </div>
    );
  }
}
export default Home;

我修复了它，感谢:如何使React.js组件在回流中侦听存储

我必须触发我的时间:

var TimeStore = Reflux.createStore({
    listenables: TimeActions,
    init() {
        this.time = '';
    },
    onCurrenttime() {
      this.trigger({
        time : '13:47'
      });
    }
});
相关文章：