React双API联动数据更新异常：useEffect状态未同步渲染问题

核心问题 #

1. 状态更新破坏数据结构：原代码在更新studentData和resultFailData时，直接将映射后的数组赋值给状态，丢失了原有的对象层级（比如studentData原本包含studentInfo对象），导致后续数据访问失败。
2. 竞态条件与不完整处理：当其中一个API先返回时，另一个数据集尚未就绪，此时处理会生成不完整数据；而状态结构被破坏后，后续的修正处理也无法正常执行。
3. 异步状态更新导致渲染延迟：React状态更新是异步的，在同一useEffect中多次调用状态 setter 可能导致组件在状态更新完成前就完成渲染，出现数据与UI不一致的情况。

解决方案：使用useMemo派生合并数据 #

避免将合并后的数据存入本地状态，而是直接从 reducer 数据派生合并结果，确保数据始终与源数据同步，同时消除竞态条件。

优化后的代码

// 派生带手机号的不及格学生数据
const mergedFailData = useMemo(() => {
  const failDataList = reducerData?.resultFailData?.data || [];
  const studentList = reducerData?.studentData?.studentInfo?.data || [];

  // 构建学生手机号查找表，优化查找效率
  const studentPhoneLookup = studentList.reduce((map, student) => {
    map[student.student_id] = student.phone;
    return map;
  }, {});

  return failDataList.map(item => ({
    ...item,
    mobile: studentPhoneLookup[item.student_id] || ''
  }));
}, [reducerData.resultFailData, reducerData.studentData]);

// 派生带状态的学生信息数据
const mergedStudentData = useMemo(() => {
  const failDataList = reducerData?.resultFailData?.data || [];
  const studentList = reducerData?.studentData?.studentInfo?.data || [];

  // 构建不及格学生ID集合，优化查找效率
  const failedStudentIds = new Set(failDataList.map(item => item.student_id));

  return studentList.map(item => ({
    ...item,
    status: failedStudentIds.has(item.student_id) ? "fail" : "pass"
  }));
}, [reducerData.resultFailData, reducerData.studentData]);

关键改进点

• 消除本地状态同步问题：直接从 reducer 数据派生合并结果，无需维护本地状态，确保数据始终最新。
• 优化数据查找效率：使用对象和集合替代find/some，将时间复杂度从O(n²)降至O(n)，提升大数据量下的性能。
• 自动响应源数据变化：useMemo的依赖数组会监听 reducer 数据的变化，自动重新计算合并结果，保证UI与数据同步。

表格渲染注意事项

确保表格组件使用上述派生的mergedFailData和mergedStudentData作为数据源，并且为表格行设置唯一key（如student_id），确保React能正确识别数据变化并重新渲染。

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