React Async example with useState未按预期工作，问题出在哪里？

在React中使用useState和异步操作时，可能会遇到一些问题，因为useState的更新是异步的。以下是一个简单的示例，展示了如何在React组件中使用useState和异步操作：

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

function AsyncExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default AsyncExample;

常见问题及解决方法

数据未按预期更新：
- 原因：useState的更新是异步的，因此在调用setData后立即检查data的值可能不会得到更新后的值。
- 解决方法：使用useEffect来监听data的变化，或者在finally块中处理加载状态。

多次渲染问题：
- 原因：在组件渲染过程中多次调用异步函数，可能会导致不必要的重复请求。
- 解决方法：使用useEffect的依赖数组来控制异步函数的调用时机，确保只在组件挂载或特定状态变化时调用。
竞态条件：
- 原因：多个异步操作同时进行，可能导致数据不一致。
- 解决方法：使用useReducer来管理复杂的状态逻辑，或者使用Promise.all来处理多个并行的异步操作。