如何在使用fetch时使react等待api数据被取回

在使用fetch时，可以通过使用async/await来使React等待API数据被取回。

首先，确保你的组件是一个异步函数，可以在函数前面加上async关键字。然后，在使用fetch获取数据的地方，使用await关键字等待数据的返回。

下面是一个示例代码：

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

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const jsonData = await response.json();
      setData(jsonData);
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;

在上面的代码中，我们使用了useState来保存API返回的数据，并使用useEffect来在组件加载时获取数据。在useEffect的回调函数中，我们定义了一个异步函数fetchData，使用await关键字等待fetch请求的返回结果，并将结果转换为JSON格式。最后，我们使用setData来更新组件的状态，触发重新渲染。

在组件的返回部分，我们使用条件渲染来展示数据。如果data存在，我们将其遍历并渲染为一个列表。如果data为null，我们显示"Loading..."。

这样，当组件加载时，它会等待API数据被取回后再进行渲染，确保了数据的可用性。