React中useEffect内映射fetch函数无法运行的问题求助

核心问题 #

你的代码存在三个关键问题，导致useEffect中recalculateData的fetch无法正常执行：

1. 异步操作未等待：recalculateData同步返回tempCopy，但内部fetch是异步操作，返回时请求还未完成，数据根本没更新；同时按钮触发时copyOptions已有值，而useEffect首次调用时copyOptions可能还是初始空数组，导致map遍历0次，无fetch请求。
2. 错误依赖组件状态：recalculateData中遍历的是组件状态copyOptions，但首次执行时这个状态还未被赋值，自然无法触发循环。
3. 异步函数未正确处理：fetchData声明为async却未利用await处理异步流程，导致setCopyOptions拿到的是未完成处理的tempCopy。

修复代码 #

1. 重写recalculateData为异步函数，使用Promise.all等待所有请求完成

const recalculateData = async (data) => {
  let tempCopy = JSON.parse(JSON.stringify(data));
  // 遍历传入的data而非组件状态copyOptions，避免依赖时机问题
  await Promise.all(data.map((_, ix) => 
    fetch(`http:...`, {
      method: 'POST',
      body: JSON.stringify({ data: data[ix] }),
      headers: { "Content-type": "application/json; charset=UTF-8" }
    })
    .then(res => res.json())
    .then(res => {
      tempCopy[ix].a = res.a;
      tempCopy[ix].b = res.b;
      tempCopy[ix].c = res.c;
    })
    .catch(err => console.error('重计算请求失败:', err))
  ));
  return tempCopy;
};

2. 修改fetchData，等待recalculateData完成后再更新状态

const fetchData = async (time) => {
  try {
    const res = await fetch(`http://...`, {
      method: 'POST',
      body: JSON.stringify({ time }),
      headers: { "Content-type": "application/json; charset=UTF-8" }
    });
    if (!res.ok) throw new Error('初始请求失败');
    
    const resData = await res.json();
    setA(resData.data.a);
    setB(resData.data.b);
    
    // 等待所有重计算请求完成后再更新状态
    const recalcData = await recalculateData(resData.data.c);
    setCopyOptions(recalcData);
    setDataLoaded(true);
  } catch (err) {
    console.log(err);
    setDataErr(true);
  }
};

3. 优化useEffect的稳定性（可选）

如果fetchData是组件内定义的函数，用useCallback包裹确保其稳定性，避免不必要的重执行：

import { useCallback } from 'react';

const fetchData = useCallback(async (time) => {
  // 上述fetchData代码
}, []); // 若有依赖（如自定义hook、外部函数）需添加到依赖数组

useEffect(() => {
  fetchData('');
}, [fetchData]);

修复逻辑说明 #

• 遍历传入的data：不再依赖组件状态copyOptions，避免首次执行时状态未初始化导致的遍历失效。
• Promise.all等待所有请求：确保所有fetch请求完成并更新tempCopy后，再返回最终数据给setCopyOptions。
• await处理异步流程：让fetchData等待重计算完成，保证状态更新的顺序和正确性。

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