Question

我正在研究导航，一旦单击菜单项，该导航将显示第二层。

我大概有以下代码：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentData:[]
    }
  }

initFirstTier(type){
    let url="";
    let self= this;
    if (type=="Closed-End"){
       url="{one url here}"
    }
    else {
      url={another url here}
    }


  fetch(url)
    .then(function(response){
      response.json().then(function(data){
        self.setState({currentData:data});
      })
    })
}

render(){
 return(
         <div>
              <ul>
                    <li onClick={() => {this.initFirstTier('Mutual Fund')}}>           
                      <a href="javascript:;">Mutual Fund</a>         
                    </li>          
                    <li onClick={() => {this.initFirstTier('VPS')}}>
                      <a href="javascript:;">VPS</a>           
                    </li>         
                    <li onClick={() => {this.initFirstTier('Closed-End')}}>             
                      <a href="javascript:;">Closed-End Fund</a>          
                    </li>                 
             </ul>

             {/* ********************Tier 1********************/}

          {this.state.currentData.length !==0 ? <FirstTier currentData = {this.state.currentData} /> : null}
     </div>
     )
     }
 }

这是我遇到的问题。例如，如果我单击“ VPS”菜单项，则父组件将调用api并将数据发送到子组件-可以正常工作。但是，如果接下来我单击“ Closed-End”，它调用了一个不同的api，我仍然会从子组件中的VPS api调用中获取带有来自VPS api调用的数据的控制台日志，这是我不应该得到的。然后，我获得带有正确数据的console.log，但是当我获得正确数据时，一切都已经被破坏了。如何防止React将旧数据发送给孩子？仅在使用新的api调用更新状态后，才需要发送它。

Answer 1

您可能会引入加载状态。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentData:[],
      loading: false
    }
  }

initFirstTier(type){
    let url="";
    let self= this;
    if (type=="Closed-End"){
       url="{one url here}"
    }
    else {
      url={another url here}
    }

  this.setState({loading: true});
  fetch(url)
    .then(function(response){
      response.json().then(function(data){
        self.setState({currentData:data, loading: false});
      })
    })
}

render(){
 return(
         <div>
              <ul>
                    <li onClick={() => {this.initFirstTier('Mutual Fund')}}>           
                      <a href="javascript:;">Mutual Fund</a>         
                    </li>          
                    <li onClick={() => {this.initFirstTier('VPS')}}>
                      <a href="javascript:;">VPS</a>           
                    </li>         
                    <li onClick={() => {this.initFirstTier('Closed-End')}}>             
                      <a href="javascript:;">Closed-End Fund</a>          
                    </li>                 
             </ul>

             {/* ********************Tier 1********************/}

          {this.state.currentData.length !==0 ? 
              (this.state.loading ? <div>Loading...</div> : <FirstTier currentData = {this.state.currentData} />) 
              : null}
     </div>
     )
     }
 }

反应如何防止孩子渲染直到状态更新

1 个答案: