React+Redux项目新增textarea后未保存关闭模态框store意外更新问题

问题根因 #

核心是引用类型浅拷贝导致Redux store被意外修改：
你通过useSelector从Redux拿到的active是store中存储的原对象引用，直接执行setFormValues(active)后，formValues.nonConformity和Redux store中active.nonConformity指向同一个数组。在handleAddNonButton方法中你直接对这个数组执行push操作，相当于绕过Redux dispatch直接修改了store数据，所以会出现未保存就更新了store的问题。
而修改textarea内容时你用map返回新数组，操作的是新的数组引用，所以不会触发这个问题。

修复方案 #

1. 给formValues赋值时切断和Redux store的引用关联 #

修改useEffect中的赋值逻辑，对active做拷贝后再赋值给state：

useEffect(() => {
  if (active) {
    // 方式1：全量深拷贝，适合有多层嵌套的复杂数据
    setFormValues(structuredClone(active));
    
    // 方式2：针对当前场景的单层浅拷贝，性能更高
    // setFormValues({
    //   ...active,
    //   nonConformity: [...active.nonConformity]
    // })
  } else {
    setFormValues({
      ...initFatPoint,
      nonConformity: []
    });
  }
}, [active]);

2. 修改新增逻辑，避免直接操作原数组 #

修改handleAddNonButton方法，先拷贝数组再执行新增操作：

const handleAddNonButton = () => {
  // 先拷贝数组再修改，不触碰原引用
  const newNonConformity = [...formValues.nonConformity];
  newNonConformity.push('');
  setFormValues({
    ...formValues,
    nonConformity: newNonConformity,
  })
}

其他优化建议 #

• setFormValues是React内置的稳定引用，可以不用加入useEffect的依赖数组
• closeModal中无需手动执行setFormValues(initFatPoint)，你已经dispatch了clearActiveFatPoint，useEffect监听到active变为空后会自动重置表单状态

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