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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

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