React中使用useState处理数组对象时，如何确保状态更新前为最新值？

问题原因 #

React中useState的状态更新是异步且批量执行的。当你在test函数里连续调用addDummy时，每个addDummy函数内部访问的dummies都是组件当前渲染周期的旧状态，并非更新后的最新值。这就导致你判断“id是否已存在”的逻辑始终基于旧状态，无法正确拦截重复id的添加操作。

解决方案：使用函数式状态更新 #

将状态更新逻辑放到setDummies的回调函数中，这个回调会接收当前最新的状态值作为参数，确保每次判断和更新都基于最新的状态。

修改后的完整代码：

import React, { useEffect, useState } from 'react';

interface Dummy {
  id: string;
  value: number;
}

const TestComponent = () => {
  const [dummies, setDummies] = useState<Dummy[]>([]);

  const addDummy = (id: string, value: number) => {
    // 使用函数式更新，基于最新的prevDummies做判断
    setDummies((prevDummies) => {
      // 检查最新状态中是否已存在该id
      const hasExistingDummy = prevDummies.some(dummy => dummy.id === id);
      if (hasExistingDummy) {
        // 已存在则返回原状态，不做修改
        return prevDummies;
      } else {
        // 不存在则添加新对象
        return [...prevDummies, { id, value }];
      }
    });
  };

  const test = () => {
    addDummy('dummy1', 1);
    addDummy('dummy1', 2);
    addDummy('dummy2', 3);
    addDummy('dummy2', 4);
    addDummy('dummy3', 5);
    addDummy('dummy4', 6);
    addDummy('dummy4', 7);
  };

  useEffect(() => {
    console.log(dummies);
  }, [dummies]);

  return <button onClick={test}>Test!</button>;
};

export default TestComponent;

补充：如果需要“存在则更新”的逻辑 #

如果你的真实需求是已存在id时更新对应对象的value，只需修改addDummy内部的逻辑：

const addDummy = (id: string, value: number) => {
  setDummies((prevDummies) => {
    const existingIndex = prevDummies.findIndex(dummy => dummy.id === id);
    if (existingIndex !== -1) {
      // 已存在则更新该对象的value
      const updatedDummies = [...prevDummies];
      updatedDummies[existingIndex] = { id, value };
      return updatedDummies;
    } else {
      // 不存在则添加新对象
      return [...prevDummies, { id, value }];
    }
  });
};

这样连续调用addDummy('dummy1',1)和addDummy('dummy1',2)后，最终dummy1的value会被更新为2。

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