更新深层嵌套JSON时useEffect未触发，如何解决？

问题根源 #

你的updateNestedJSON函数直接修改了原state对象，而React的state更新依赖引用变化触发重新渲染和useEffect执行。由于你没有创建新的对象副本，只是修改了原对象的属性，setfetchedData传入的还是原对象引用，React会判定state未发生变化，因此不会触发useEffect。

修复方案 #

核心思路是保持state的不可变性，每次更新嵌套数据时创建新的对象副本，而非直接修改原数据。

1. 重构updateNestedJSON为不可变更新 #

function updateNestedJSON(json, path, value) {
  const keys = path.split(".");
  // 递归创建新对象，避免修改原数据
  const updateRecursive = (obj, keyIndex) => {
    if (keyIndex === keys.length - 1) {
      return { ...obj, [keys[keyIndex]]: value };
    }
    const currentKey = keys[keyIndex];
    return {
      ...obj,
      [currentKey]: updateRecursive(obj[currentKey] || {}, keyIndex + 1)
    };
  };
  return updateRecursive(json, 0);
}

2. 优化handlePathAndUpdateSelected的state更新逻辑 #

使用函数式更新，确保每次修改都基于最新的state，避免循环中的覆盖问题：

function handlePathAndUpdateSelected() {
  setfetchedData(prevData => {
    let updatedData = prevData;
    checkedArr.forEach(item => {
      const dataPath = findValuePath(updatedData, item);
      if (!dataPath) return;
      const cleanupPath = dataPath.substr(0, dataPath.lastIndexOf(".") + 1) + "orderSubStatus";
      updatedData = updateNestedJSON(updatedData, cleanupPath, 2);
    });
    return updatedData;
  });
}

关键说明 #

• React对state的变化检测是浅比较，只有当state的引用发生改变时，才会触发组件重新渲染和useEffect执行。
• 处理嵌套数据时，必须保证每一层对象都是新的副本，不能直接修改原state对象。
• 函数式更新(setState(prev => newState))在循环或异步场景下更可靠，能确保基于最新的state进行修改。

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