React中useEffect调用异步函数后组件未即时渲染更新问题

你遇到的渲染延迟核心是违反了React的状态更新规则，有三个典型问题：

• 直接修改传入的props.courses原数组/原对象（即状态突变），props.courses[i].current = xxx这种写法直接篡改了现有状态，React无法主动感知这种修改
• 调用setCourses时传入的还是原来的数组引用，React做浅比较时会判断状态没有变化，直接跳过重渲染流程，这也是为什么需要点击其他组件、刷新页面才能看到更新——只有其他状态变化触发重渲染时，你之前偷偷改的原数据才会被渲染到页面上
• useEffect依赖项设置错误：fetchData是定义在组件内部的普通函数，每次组件渲染都会重新生成新的函数引用，把它放在依赖数组里会导致effect执行时机混乱，无法在数据更新后准确触发拉取逻辑

1. 遵循不可变数据更新规则 #

永远不要直接修改原状态对象/数组，拉取到新数据后创建全新的状态副本，再传给setCourses，让React能检测到引用变化触发重渲染。

2. 修正useEffect的写法 #

把数据拉取逻辑放到effect内部，正确设置依赖项，避免不必要的重复执行或者执行时机错误。
修正后的代码示例：

useEffect(() => {
  const fetchData = async () => {
    const updatedVector = await API.getUpdate();
    // 遍历原数组生成全新的数组副本，不修改原数组
    const updatedCourses = await Promise.all(
      props.courses.map(async (course) => {
        const isUpdated = updatedVector.some(item => item.code === course.code);
        if (isUpdated) {
          // 需要更新的项返回全新的对象，不修改原course对象
          const latestCurrent = await API.getSpecificData(course.code);
          return { ...course, current: latestCurrent };
        }
        // 不需要更新的项直接返回原对象即可
        return course;
      })
    );
    // 传入全新的数组引用，触发重渲染
    props.setCourses(updatedCourses);
  };

  fetchData();
}, [props.courses, props.setCourses]);

注意：上面用Promise.all包裹循环里的异步请求，比嵌套for循环的执行效率更高，所有请求并行执行，不会等上一个请求完才发下一个。

3. 操作数据库后主动触发刷新 #

如果是在当前页面执行了增删改sqlite的操作，不要等useEffect被动触发，在接口返回成功后直接调用拉取最新数据的逻辑，就能实现操作完即时渲染，不需要额外点击：

// 比如修改课程数据的提交逻辑
const handleUpdateCourse = async (courseId, newData) => {
  // 先调用接口更新数据库
  await API.updateCourse(courseId, newData);
  // 接口成功后立刻拉取最新课程数据，更新视图
  const updatedVector = await API.getUpdate();
  const updatedCourses = await Promise.all(
    props.courses.map(async (course) => {
      const isUpdated = updatedVector.some(item => item.code === course.code);
      return isUpdated 
        ? { ...course, current: await API.getSpecificData(course.code) } 
        : course;
    })
  );
  props.setCourses(updatedCourses);
};

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