React中useState更新数组时被覆盖？求问题原因

云上老周

2026-7-18

问题原因及解决方案

核心问题：状态更新依赖旧值时未使用函数式更新

你遇到的问题根源在于直接使用当前状态变量dictFilterArray计算新状态，而React的useState状态更新是异步批量处理的。当多次触发buttonClicked时，每次调用setFilterArray拿到的dictFilterArray可能还是初始的旧数组，导致每次添加元素都是基于旧数组重新创建，最终数组只会保留最后一次添加的元素。

修复方案

1. 使用函数式更新获取最新状态

将setFilterArray的调用改为函数式形式，React会传入当前最新的状态值作为参数，确保每次更新都基于最新数组：

const buttonClicked = (d: any) => {
  setFilterArray(prevArray => {
    const exists = prevArray.some(el => 
      el.keyword_uid === d.srcElement.__data__.data.uid
    );
    if (exists) {
      return [...prevArray];
    } else {
      return [...prevArray, {
        keyword_uid: d.srcElement.__data__.data.uid,
        keyword_name: d.srcElement.__data__.data.name
      }];
    }
  });
};

2. 优化辅助函数（可选）

如果想保留辅助函数，需要让它接收最新数组作为参数，配合函数式更新使用：

const getUpdatedArray = (arr: any[], elCompare: any) => {
  const { uid, name } = elCompare.srcElement.__data__.data;
  const exists = arr.some(el => el.keyword_uid === uid);
  return exists ? [...arr] : [...arr, { keyword_uid: uid, keyword_name: name }];
};

const buttonClicked = (d: any) => {
  setFilterArray(prevArray => getUpdatedArray(prevArray, d));
};