反應如何防止孩子渲染直到狀態更新

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