ReactJS - 在渲染組件之前加載數據

在ReactJS中，我將路由更改爲帶有「id」的新路由，然後基於此「id」，我必須調用API並獲取數據。ReactJS - 在渲染組件之前加載數據

我已經使用了componentDidMount和componentWillMount中的API調用，並嘗試使用setState()來讓我的數據處於該狀態。但他們沒有在我的情況下工作。

問題出在render()部分，當我想使用我的數據（來自狀態）時，數據不存在，因爲API調用需要一些時間來更新狀態。

這裏是我的代碼：

componentDidMount() { 
    api.get(id).then((response) => { 
    this.setState({response,}); 
    });

通過這種方法，我沒有數據時，我想它（render方法），它最終會在狀態，但爲時已晚！

如何更改我的方法來解決加載問題？

2017-10-20 Adel

你這樣做的方式，你可以驗證你的渲染方法中的響應狀態對象，如果它爲空/空，然後返回<div>Loading...</div>。

當您的狀態根據響應進行更新時，組件將自動重新渲染。這一次，該對象將被填充，您可以返回組件的HTML。

例如

render(){ 

    if (!this.state.response){ 
     return <div>Loading...</div> 
    } 

    return (
     <div>Proper Stuff</div> 
    ); 
}

編輯在網站上的注意，如果你在構造函數中設置的初始狀態，可以確保對象不爲空，但只是有空/空值。這也可能有助於取決於您的render方法在做什麼，例如

constructor(props){ 
    super(props); 

    this.state = { 
     response: {...} 
    }; 
}

2017-10-20 14:52:52

你的渲染代碼應該是

render(){ 
return({this.state.response? 
      <div> Render your component here</div>: 
      <div> Loading ... </div>}); 
}

這樣您的組件將不會渲染，直到它具有數據並顯示Loading ...文字。

2017-10-20 14:51:04 palsrealm

回答