在React的useEffect中从JSON数据设置状态及异步请求问题

关于useEffect vs 文件顶部执行 #

肯定用空依赖数组的useEffect是最佳实践，原因如下：

• 文件顶部直接执行请求属于同步阻塞，会拖慢组件初始化速度，甚至导致页面长时间空白
• 直接在文件顶部没法更新React状态——组件还没挂载，状态更新逻辑根本不生效
• 空依赖数组的useEffect刚好满足「组件加载时仅执行一次」的需求，且是在组件挂载后异步执行，不会阻塞渲染

为什么拿到的是Promise不是数据？ #

async函数本身就会返回Promise，你直接赋值const json = fetchData(...)拿到的肯定是Promise对象，必须用await才能获取里面的实际数据。另外你的遍历逻辑写在Promise外面，这时候json还没拿到数据，遍历自然无效。

重构后的代码 #

先抽离通用请求函数，统一处理错误，再梳理异步逻辑：

// 通用请求函数：处理404和JSON解析错误
async function fetchData(url) {
  const response = await fetch(url, {
    headers: { 
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  });

  if (!response.ok) {
    throw new Error(`文件未找到: ${url}`);
  }

  try {
    return await response.json();
  } catch (err) {
    throw new Error(`JSON解析错误(${url}): ${err.message}`);
  }
}

function App() {
  const [appState, setAppState] = useState({});

  useEffect(() => {
    // 把所有异步逻辑包在内部async函数里
    async function loadAllData() {
      try {
        // 先await拿到初始数据
        const initialData = await fetchData('data/initial-data.json');
        
        // 并行请求所有额外数据，提升效率
        const moreDataPromises = Object.keys(initialData).map(item => 
          fetchData(`data/moredata-${item}.json`)
        );
        const moreDataList = await Promise.all(moreDataPromises);

        // 合并数据后更新状态
        const mergedData = {...initialData};
        Object.keys(initialData).forEach((item, index) => {
          mergedData[item] = {...mergedData[item], ...moreDataList[index]};
        });

        setAppState(mergedData);
      } catch (err) {
        // 统一捕获所有加载错误
        console.error('数据加载失败:', err.message);
      }
    }

    loadAllData();
  }, []); // 空依赖数组，确保仅执行一次

  // 渲染逻辑
  return <div>{/* 根据appState渲染内容 */}</div>;
}

关键优化点 #

• 通用fetchData用throw抛出错误，统一在调用处用try/catch处理，避免零散的catch语句
• 用Promise.all并行请求额外数据，比串行循环效率更高
• 所有异步逻辑都包裹在useEffect内部的async函数中，确保能正确await获取数据
• 统一错误捕获，便于排查问题

内容的提问来源于stack exchange，提问作者Cirrocumulus