可以直接在 React 渲染函數中使用 Async Await 嗎？

React 渲染函數中的非同步等待

問題：
你想在React 的渲染函數中使用非同步等待功能元件執行非同步操作，例如從後端API 取得資料。但是，您遇到了在渲染函數中無法識別await關鍵字的問題。

解決方案：

雖然您可以在類別組件的渲染方法中使用async關鍵字，出於效能考慮，不建議使用。相反，最好將數據獲取和顯示分離到兩個不同的組件中：

父組件（數據獲取）：

<code class="javascript">class ParentComponent extends React.Component {
  constructor() {
    super();
    this.state = { data: null };
  }

  componentDidMount() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return this.state.data ? <ChildComponent data={this.state.data} /> : null;
  }
}</code>

子元件（資料）顯示）：

<code class="javascript">const ChildComponent = ({ data }) => {
  return (
    <table>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};</code>

說明：

• 父元件ParentComponent 使用fetch 函數從API 取得資料。
• 一旦接收到數據，就會設定數據狀態，從而觸發重新渲染。
• 在render方法中，父元件會檢查state中的data屬性是否存在。如果是，它會渲染子元件 ChildComponent，並將取得的資料作為 props 傳遞給它。
• ChildComponent 是一個純函數元件，用於在表格中顯示資料。

注意：

對於基於React hooks 的元件，可以使用useEffect hook 來取得資料並更新元件狀態，將資料擷取邏輯與渲染函數分離函數分離。

以上是可以直接在 React 渲染函數中使用 Async Await 嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！