可以直接在 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中文网其他相关文章！