Question

首先是一些代码。

路线。

<Route path="/parent" component={parent}>
  <Route path="/child1" component={child1}/>
  <Route path="/child1" component={child1}/>
</Route>

父

class Parent extends React.Component {
  constructor(props){
    super(props);
    this.state = {Loading: true}
  }
  componentWillMount() {
    this.changeListener = ::this._onChange;
    Store.addChangeListener(this.changeListener);
  }

  componentWillUnmount() {
    Store.removeChangeListener(this.changeListener);
  }

  _onChange(){
    this.setState( Store.state );
  }

  render() {
    return (
      <div>
      { 
        this.props.children ?
        React.cloneElement(this.props.children, {...this.state}) :
        null
      }
      </div>
    );
  }
}

商店在首次安装时返回默认对象

{
  Loading: true, 
  Child1: null,
  Child2: null
}

此装载字段是导致竞争条件的原因。

Child1，Child2看起来非常简单。

class Child1/2 extends React.Component {
  constructor(props){
    super(props)
  }
  componentDidMount(){
    // Action that trigers Store event. 
    Actions.GET_CHILD1_DATA();
  }
  render(){
    // Render logic that depends on teh loading. 
    ....
  }
}

存储这是一个基于事件发射器和Flux

构建的实现

class Store extends BaseStore {
  _registerToActions(action) {
    switch(action.actionType) {
      case GET_CHILD1_DATA:
        this.Loading = true;
        this.emitChange();
        // Logic grabbing data from server
        this.Loading = false;
        this.emitChange();
        break;
}}}

请在此处忽略任何语法错误，而不是导致问题的原因我只是想说明发生了什么。

因此导航问题就出现了。 HEre是事件的顺序。

孩子1坐骑。 Loading = true
子级1触发API数据的操作
商店根据API调用发出新状态。
父状态更新为新状态。
儿童1呈现。 loading = false
- Child 1调用componentWillUnmount（）并触发tore action loading = true //此比赛，路线和路线获胜。
使用<Link />
Child 2从父级加载状态，仍设置为false
Child 2尝试使用不存在的数据进行渲染。

我在Child1上加载页面。孩子1火灾一切正常。但是一旦我将child1导航到child2。

Loading = false;并且child2假定它已完成加载并尝试加载其尚无数据的组件。

我尝试在LOADING_TRUE上对两个孩子附加componentWillUnmount()行动。无济于事。

Race Condition，react-router，flux store update

0 个答案: