React中实现对象数组去重添加及setState异步问题咨询

实现同名对象去重添加的正确写法 #

要实现添加新对象时仅保留唯一name的逻辑，必须基于最新的状态快照做判断，代码示例如下：

const [objects, setObjects] = useState([
  { name: 'alice' },
  { name: 'bob' }
]);

const addNewObject = (newObj) => {
  setObjects(prevObjects => {
    // 检查数组中是否已存在同名对象
    const isDuplicate = prevObjects.some(item => item.name === newObj.name);
    if (!isDuplicate) {
      // 无重复则返回新数组，不修改原状态
      return [...prevObjects, newObj];
    }
    // 有重复则返回原数组，不触发状态更新
    return prevObjects;
  });
};

直接用当前objects过滤的问题 #

直接依赖当前的objects变量做判断（比如if (!objects.some(...))）存在状态不一致的风险。因为React的useState更新是异步批量处理的，当你连续触发多次添加操作时，当前的objects可能还是旧的状态值，导致判断逻辑失效，最终出现重复添加的情况。

举个实际场景：快速点击两次添加name为ben的对象，直接用objects判断的话，第一次判断时数组里没有ben，添加后状态还没完成更新；第二次判断时objects依然是旧数组，就会错误地再次添加ben。

处理setObjects的异步更新问题 #

解决异步状态的核心方案是使用函数式更新：给setObjects传入一个回调函数，React会自动把最新的状态快照作为参数传给这个回调，基于这个参数做操作就能确保逻辑始终基于最新状态。

如果需要在状态更新后立即获取最新值，可以通过useEffect监听objects的变化：

useEffect(() => {
  // 这里的objects是更新后的最新状态
  console.log('最新对象数组:', objects);
}, [objects]);

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