React useEffect更新state丢失原有数据问题求助

问题描述 #

我定义了如下state：

const [serviceListData, setserviceListData] = React.useState({});

想为当前state添加ID字段，于是在selectInsurance和count变化时触发的useEffect钩子中实现了以下代码：

React.useEffect(() => {
  if (selectInsurance) {
    setserviceListData({
      ...serviceListData,
      ID: filtered.ID,
    });
  }
}, [selectInsurance, count]); 

运行后发现原有状态被移除，仅保留新ID。控制台输出如下：

Object {  }
EachInsurance.js:56
Object { ID: 189256 }
EachInsurance.js:56
Object { ID: 189256  }
EachInsurance.js:56
Object {  }
EachInsurance.js:56
Object {  }
EachInsurance.js:56
Object { ID: 189257 }

初始状态为空对象，添加ID后切换另一个Insurance时，原有状态被清空并替换为新ID，本以为扩展运算符会保留旧值，请问问题出在哪里？

问题原因 #

核心问题是闭包陷阱：useEffect的依赖数组中没有包含serviceListData，导致钩子内部捕获的serviceListData始终是初始的空对象。每次selectInsurance或count变化时，即使serviceListData已经更新过，钩子拿到的还是最初的空对象，所以扩展运算符只能复制空对象，再添加新ID，看起来就像是覆盖了所有原有属性。

另外控制台出现空对象的情况，大概率是selectInsurance切换时先变为假值，此时钩子触发但未执行状态更新，或者存在其他重置serviceListData的逻辑。

解决方法 #

方法1：使用函数式更新（推荐） #

React的状态更新函数支持传入回调，回调会接收最新的状态值，彻底避开闭包问题：

React.useEffect(() => {
  if (selectInsurance) {
    setserviceListData(prevState => ({
      ...prevState,
      ID: filtered.ID,
    }));
  }
}, [selectInsurance, count, filtered.ID]); 

同时将filtered.ID加入依赖数组，确保当目标ID变化时能触发正确更新；如果filtered是复杂对象，建议解构出需要的属性，避免因对象引用变化导致不必要的钩子触发。

方法2：将serviceListData加入依赖数组 #

如果一定要直接使用serviceListData，可以把它加入useEffect的依赖数组，但这样会导致每次serviceListData变化时钩子都触发，容易引发不必要的重复更新，因此不推荐这种方式。

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