React状态变量关联异常：calculationResults修改影响calculatedResults

1. 对象引用共享：在createRequest方法中，将同一个data对象同时赋值给calculationResults和calculatedResults状态。由于JavaScript中对象是引用类型，两个状态实际上指向内存中的同一个对象。当你在addUserInputUsContent里用splice修改calAgreements数组时，本质是修改了这个共享对象的属性，所以calculatedResults作为同一对象的引用，自然会看到数组被修改后的结果。

2. 直接修改原状态对象：更新状态时直接修改calculationResults原对象，再调用setCalculationResults(calculationResults)的方式不符合React的状态更新原则。React依赖状态的引用变化来触发重渲染，传入同一个引用会被判定为状态未变化，不仅可能不触发更新，还会导致状态的不可预测修改。

1. 初始化时解除对象引用绑定 #

修改createRequest方法，给两个状态传入对象的深拷贝，确保它们指向独立的内存地址：

const createRequest = () => {
  // 其他逻辑
  const data = /* 接口返回或生成的数据 */;
  // 使用JSON序列化实现深拷贝（适用于无特殊类型的对象）
  setCalculationResults(JSON.parse(JSON.stringify(data)));
  setCalculatedResults(JSON.parse(JSON.stringify(data)));
}

如果对象包含函数、Symbol、Date等无法通过JSON序列化的类型，建议使用lodash的cloneDeep工具，或手动实现递归深拷贝函数。

2. 遵循不可变原则修改状态 #

在所有操作状态的方法中，禁止直接修改原状态对象，而是创建新的对象/数组来更新状态。以addUserInputUsContent为例，优化后的代码如下：

const addUserInputUsContent = () => {
  if (!calculationResults?.hw?.agreements) return;

  // 创建当前状态的深层拷贝，避免修改原对象
  const currentState = {
    ...calculationResults,
    hw: {
      ...calculationResults.hw,
      agreements: [...calculationResults.hw.agreements]
    }
  };

  // 筛选目标产品
  const targetAgreements = currentState.hw.agreements.filter(a => a.boQItem.id === productNo);
  // 生成移除目标产品后的新数组
  const remainingAgreements = currentState.hw.agreements.filter(a => a.boQItem.id !== productNo);

  // API调用
  post<ICalculationResult>(
    `AssessmentRequest/${id}/adduserconinput`,
    { productNo, calculatedAgreements: targetAgreements },
    (data: ICalculationResult) => {
      // 合并新数据，创建最终的新状态对象
      const newState = {
        ...currentState,
        hw: {
          ...currentState.hw,
          agreements: [...remainingAgreements, ...(data.hw?.agreements || [])]
        }
      };
      setCalculationResults(newState);
    }
  );
}

核心要点：

• 对嵌套的对象/数组逐层创建浅拷贝，确保每一层都是新的引用
• 所有修改操作都在拷贝后的对象上进行
• 最终用新对象调用状态更新函数，确保React能检测到状态变化

3. 简化数组操作逻辑 #

原代码中“筛选+收集索引+splice”的逻辑可以简化为两次filter操作，直接得到目标数组和剩余数组，避免手动操作索引，减少出错概率。

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