react引用async异步函数数据渲染

当需要在 React 组件中引用异步函数获取的数据时，可以使用 useState 钩子来存储数据，并在组件渲染时进行处理。下面是一个示例，展示了如何在 React 中引用异步函数的数据并进行渲染：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  // 定义异步函数，从 API 获取数据
  async function fetchData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    setData(json);
  }

  // 在组件挂载时调用 fetchData 函数
  useEffect(() => {
    fetchData();
  }, []);

  // 渲染数据
  return (
    <div>
      {data ? (
        <div>
          <h1>{data.title}</h1>
          <p>{data.completed ? 'Completed' : 'Not completed'}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default MyComponent;

　　在上面的代码中，我们使用 useState 钩子创建了一个名为 data 的状态，用于存储从 API 获取的数据。然后，我们定义了一个名为 fetchData 的异步函数，它使用 fetch 来获取数据，并

将其存储在 data 状态中。接着，我们在组件挂载时使用 useEffect 钩子调用 fetchData 函数以获取数据。最后，在渲染函数中，我们根据 data 的值来渲染数据或显示“Loading...”消息。

这样做能确保在数据加载完成之前显示“Loading...”，并在数据加载完毕后渲染数据。

希望这对您有所帮助！如果您有任何其他问题，请随时提问。

转自：ChartGpt