react usestate使用async

React 中的 useState 钩子只能用于同步更新状态。如果你需要在异步操作完成后更新状态，你可以使用 useEffect 钩子。下面是一个例子：

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

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

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

  return (
    <div>
      {data && <p>{data}</p>}
    </div>
  );
}

在上面的例子中，我们使用了 useEffect 钩子来异步获取数据并更新状态。我们在 useEffect 的回调函数中创建了一个异步函数 fetchData，并在其中使用 await 关键字等待数据的响应。然后我们将数据设置为组件的状态 data，并在组件的返回中使用它。注意，我们使用了一个条件语句来检查 data 是否为 null，这是因为在异步操作完成之前，data 的值为 null。