如何通过 Hooks 在 React 渲染函数中使用 Async Await

React 渲染函数中的 Async Await

理解问题

在您的代码中，您尝试在渲染函数的地图函数中使用异步等待。但是，这种方法无效，因为异步函数不能直接在渲染函数中使用。 React 的渲染函数需要同步代码。

正确方法

要在渲染函数中使用异步操作，您可以遵循以下两种方法之一：

1.数据获取和组件分离

将数据获取逻辑分离到处理异步操作的单独组件中。然后，仅在数据可用时有条件地渲染 UI 组件。

class ParentComponent extends React.Component {
  constructor() {
    this.state = { data: null };
  }

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

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

const Child = ({ data }) => (
  <table>
    <tbody>
      {data.map((x, i) => (
        <tr key={i}>
          {x.map((y, j) => <td key={j}>{y}</td>)}
        </tr>
      ))}
    </tbody>
  </table>
);

2.具有异步效果的 Hooks

使用 React hooks 来管理异步操作。

const ParentComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const getData = async () => {
      const resp = await fetch("/some/async/data");
      const json = await resp.json();
      setData(json);
    };
    getData();
  }, []);

  return data ? <Child data={data} /> : null;
};

附加说明

• 使用示例中的坐标可以替换为实际的经度和纬度值。
• 如果您的数据记录具有唯一标识符，请使用它们作为键属性而不是数组索引。

以上是如何通过 Hooks 在 React 渲染函数中使用 Async Await的详细内容。更多信息请关注PHP中文网其他相关文章！