React中向useState传递嵌套JSON对象遇报错，求解答

常见错误原因及解决方法 #

1. 直接修改原State对象（最常见）

React的useState状态是不可变的，直接修改嵌套对象/数组的属性会导致React无法检测到状态变化，甚至触发报错。

错误示例（类似你用for循环尝试的操作）：

const [trees, setTrees] = useState(TreesList);

// 错误：直接修改原state数组里的对象
for (let i = 0; i < trees.length; i++) {
  trees[i].details.height += 5;
}
setTrees(trees); // 无法触发重渲染，可能引发状态不一致

2. 正确的不可变更新方式

需要通过逐层复制嵌套对象，创建新的引用，让React能识别状态变化。

批量更新所有嵌套对象（替代for循环）

用map返回新数组，同时复制每一层嵌套对象：

const [trees, setTrees] = useState(TreesList);

// 批量更新所有树的height属性
const updateAllHeights = () => {
  setTrees(prevTrees => 
    prevTrees.map(tree => ({
      ...tree, // 复制外层树对象
      details: {
        ...tree.details, // 复制details嵌套对象
        height: tree.details.height + 5 // 更新目标属性
      }
    }))
  );
};

更新单个嵌套对象

如果需要根据条件更新某一项：

const updateSingleTree = (targetId) => {
  setTrees(prevTrees => 
    prevTrees.map(tree => {
      if (tree.id === targetId) {
        return {
          ...tree,
          details: {
            ...tree.details,
            height: tree.details.height + 5
          }
        };
      }
      return tree; // 未匹配项直接返回原对象
    })
  );
};

3. 深层嵌套对象的处理

如果你的JSON嵌套层级超过2层，避免直接使用JSON.parse(JSON.stringify(prevState))（会丢失函数、日期等特殊类型），推荐逐层手动复制，或者使用immer库简化操作：

// 使用immer的示例（需先安装immer）
import { produce } from 'immer';

const updateDeepNested = () => {
  setTrees(prevTrees => 
    produce(prevTrees, draft => {
      draft[0].details.growth.rate += 0.5; // 直接修改draft，immer自动生成不可变副本
    })
  );
};

排查步骤总结 #

• 检查是否直接修改了原state对象：必须返回新的数组/对象
• 确认嵌套对象的每一层都被复制：不能只修改深层属性而不更新上层引用
• 用map/filter等返回新数组的方法替代for循环修改原数组
• 始终使用函数式更新（prevState参数）确保基于最新状态修改

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