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

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> ) } }