如何在 React 渲染函數中使用 async/await

在 React 中，渲染函數通常用於純同步操作。但是，在某些場景下，您可能會遇到需要在此函數內執行非同步任務的情況。本文將討論如何在渲染函數中有效地使用 async/await 語法。

理解問題

正如問題所強調的，嘗試使用 async/直接在渲染函數中的地圖函數中等待可能會導致意外行為。這是因為地圖函數需要同步操作，並且嘗試在其中執行非同步呼叫可能會中斷渲染過程的流程。

將資料取得與顯示分離

為了解決這個問題，建議將資料取得過程與顯示邏輯分開。與其在渲染函數中執行非同步操作，不如在單獨的元件或鉤子中啟動資料取得更合適。

父元件中的非同步資料取得

在這種方法中，您會建立一個父元件（例如，ParentThatFetches），負責發出非同步請求和管理數據。利用生命週期方法或掛鉤，父組件取得資料並將其儲存在狀態中。隨後，父元件有條件地渲染一個純函數子元件（例如 Child），該子元件接收取得的資料作為 props。

class ParentThatFetches extends React.Component {
constructor () {

this.state = {};

}

comstate = {};

fetch('/some/async/data')
  .then(resp => resp.json())
  .then(data => this.setState({data}));

comstate = {} () {

fetch('/some/async/data') .then(resp => resp.json()) .then(data => this.setState({data}));

fetch('/some/async/data')
  .then(resp => resp.json())
  .then(data => this.setState({data}));

render () {

}

{data.map((x, i) => (<td key={i}>{x}</td>))}

使用Hooks 取得資料

const getData = async () => {
  const resp = await fetch('some/url');
  const json = await resp.json()
  updateData(json);
}
getData();

useEffect(() => {

const getData = async () => { const resp = wait fetch('some/url'); const json = 等待 resp.json() 更新數據（json）； } getData();

}, []);

傳回資料 && }