React中状态更新后页面未渲染数据问题求助

核心问题 #

你遇到的问题根源在于循环中调用setTaskData时依赖了闭包中的旧taskData值。React的setState是异步批量更新机制，当你在forEach循环里多次调用setTaskData时，每次调用拿到的taskData都是组件初始渲染时的空数组，导致所有更新操作都基于同一个旧值，最终只有最后一次更新会生效，页面渲染自然无法显示完整的更新结果。

解决方案1：使用函数式更新 #

将setTaskData的调用改为函数式写法，让React每次更新时都使用最新的状态值：

修改subItemMaker函数中的setTaskData调用：

const subItemMaker = (subItem, task) => {
  subItem.forEach((sub) => {
    preconditionCheck(sub) &&
      // 改用函数式更新，prevState是当前最新的taskData
      setTaskData(prevState => addObjectToArray(prevState, task, sub));
  });
};

函数式更新的优势在于，React会把你传入的函数加入更新队列，每次执行时都会拿到最新的状态值，确保所有更新操作都是基于上一次的最新结果累积的。

解决方案2：批量构建数组后一次性更新 #

如果数据量较大，多次调用setTaskData会触发多次组件重渲染，影响性能。可以先把所有需要添加的元素收集到临时数组中，最后一次性更新状态：

const DataManipulation = ({ data }) => {
  const [taskData, setTaskData] = useState([]);

  const makeUniqueProducts = (dataValues) => {
    const newTaskData = [...taskData]; // 基于当前状态创建临时数组
    dataValues.forEach((dataItem) => {
      dataItem.subItemValues.forEach((sub) => {
        if (preconditionCheck(sub)) {
          // 先把元素添加到临时数组
          addObjectToArray(newTaskData, dataItem.name, sub);
        }
      });
    });
    // 一次性更新状态
    setTaskData(newTaskData);
  };
  
  useEffect(() => {
    makeUniqueProducts(data);
  }, [data]);

  useEffect(() => {
    console.log(taskData);
  }, [taskData]);

  return (
    <>
      {JSON.stringify(taskData)}
    </>
  );
};
export default DataManipulation;

这种方式只触发一次状态更新，减少了组件重渲染的次数，性能更优。

验证说明 #

修改后，页面渲染的{JSON.stringify(taskData)}会和useEffect中打印的内容保持一致，因为状态更新逻辑已经正确基于最新值累积，组件会在状态更新后触发重渲染，显示最新的taskData。

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