useEffect触发时UI未更新：currentTaskIndex变更后页面不渲染新任务

你的核心问题是负责更新任务列表的Effect没有监听currentTaskIndex的变化，所以索引变更后不会重新计算并更新filteredTasks，导致UI无法同步刷新。另外代码里还有几处逻辑问题需要调整：

1. 修正Effect的依赖项与过滤逻辑 #

把过滤任务的Effect依赖数组加上currentTaskIndex，同时重构逻辑避免循环内频繁调用setState：

// 过滤任务的Effect，修正依赖并优化逻辑
useEffect(() => {
  // 先清空旧任务，避免数据累加
  setFilteredTasks([]);
  
  // 先收集所有目标任务，再一次性更新状态
  const targetTasks = [];
  newData.forEach(data => {
    data.forEach(dataItems => {
      dataItems.forEach(tasks => {
        // 按当前索引取对应任务，加判断避免索引越界报错
        const task = Object.entries(tasks)[currentTaskIndex];
        task && targetTasks.push(task);
      });
    });
  });
  
  setFilteredTasks(targetTasks);
}, [newData, currentTaskIndex]); // 新增currentTaskIndex作为依赖

2. 调整isCorrect触发的Effect逻辑 #

原代码中，更新currentTaskIndex后直接用旧索引值过滤任务（setState是异步的），这会导致数据错误。把过滤逻辑交给上面的Effect处理即可：

useEffect(() => {
  if (isCorrect) {
    // 仅更新索引，过滤逻辑由监听currentTaskIndex的Effect处理
    setCurrentTaskIndex(prev => prev + 1);
  }
  setNewItems([]);
  setIsCorrect(false);
}, [isCorrect]);

额外注意事项 #

• 禁止在循环内多次调用setFilteredTasks：每次setState都会触发重渲染，循环调用会造成性能浪费，还容易出现状态不一致问题，应先收集数据再一次性更新。
• 增加索引越界判断：当currentTaskIndex超过Object.entries(tasks)的长度时会返回undefined，提前判断可避免报错。

调整后，当currentTaskIndex变更时，过滤任务的Effect会自动触发，重新计算并更新任务列表，UI就能同步显示对应索引的内容了。

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