Next.js中setState()执行后值未更新的问题求助

问题代码 #

const addComponent = (component) => {
  console.log("adding component to readable template");
  setReadableTemplate([...readableTemplate, component]);
};

const updateTemplate = (component) => {
  const index = readableTemplate.findIndex((obj) => obj.id == component.id); // 获取组件的索引位置
  const updatedComponent = Object.assign({}, readableTemplate[index]); // 复制组件
  updatedComponent.props = component.props; // 更新组件的props属性
  const newReadableTemplate = readableTemplate.slice(); // 复制readable template数组
  newReadableTemplate[index] = updatedComponent; // 用更新后的组件替换新数组对应位置的元素
  setReadableTemplate(newReadableTemplate);
  console.log(readableTemplate); // 值未更新——打印的仍是旧值
};

问题分析 #

1. setState异步特性：React中useState的更新函数是异步的，调用setReadableTemplate后，readableTemplate不会立刻更新，紧接着的console.log只能拿到闭包中捕获的旧状态值。
2. 闭包导致的状态快照问题：多次调用updateTemplate时，函数会捕获渲染时的readableTemplate快照，后续更新只会基于这个旧快照修改，最终导致新状态被覆盖，看起来状态始终没变化。

修复方案 #

1. 正确打印更新后的状态

不要在setReadableTemplate后直接打印，改用useEffect监听状态变化，确保拿到最新值：

import { useEffect } from 'react';

// 在Context组件或使用该Context的组件中添加
useEffect(() => {
  console.log("更新后的readableTemplate:", readableTemplate);
}, [readableTemplate]); // 依赖readableTemplate，状态更新时自动触发

2. 使用函数式更新避免闭包问题

修改updateTemplate，改用setReadableTemplate的函数式更新写法，直接基于最新的前状态做修改，彻底解决多次调用时的状态覆盖问题：

const updateTemplate = (component) => {
  setReadableTemplate(prevState => {
    const index = prevState.findIndex((obj) => obj.id === component.id);
    if (index === -1) return prevState; // 未找到对应组件，直接返回原状态

    // 复制数组和目标组件，避免修改原状态引用
    const newTemplate = [...prevState];
    newTemplate[index] = {
      ...newTemplate[index],
      props: component.props
    };
    
    console.log("更新后的状态:", newTemplate); // 此处可直接打印新状态
    return newTemplate;
  });
};

这样修改后，无论调用多少次updateTemplate，都会基于最新的状态进行更新，同时在函数内部就能直接拿到并打印新的状态值。

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