React中如何向状态数组追加值？我的实现代码无法正常工作

嘿，我来帮你搞定这个问题！你当前的代码无法生效，核心原因是对React状态更新的写法理解有误，咱们一步步来修正：

你的代码问题所在 #

你写的setDisabled(...disabled, id)是错误的——...disabled会把原数组的元素逐个展开成单独参数传递给setDisabled，但React的setState期望接收的是完整的新状态值（这里应该是一个新数组），而不是零散的元素。举个例子，如果原disabled数组是[1,2]，你的写法相当于执行setDisabled(1,2,id)，最终状态会被设置成1，完全不是你想要的数组追加效果。

正确的两种写法 #

1. 直接创建新数组（基础场景） #

通过展开运算符创建原数组的浅拷贝，再追加新元素，把这个新数组传给setDisabled：

const [disabled, setDisabled] = useState([]);
const getValue = (id) => {
  // 正确写法：用[]包裹展开的原数组和新id，生成新数组
  setDisabled([...disabled, id]);
};

这种方式适用于大多数同步更新的场景，符合React状态不可变的原则——我们没有修改原数组，而是创建了一个全新的数组来更新状态。

2. 函数式更新（依赖前状态的场景） #

如果你的状态更新依赖于前一个状态的最新值（比如在循环、异步操作中更新状态），更安全的方式是使用函数式更新。React会自动把当前的最新状态作为参数传入函数，你返回新的数组即可：

const [disabled, setDisabled] = useState([]);
const getValue = (id) => {
  setDisabled(prevDisabled => [...prevDisabled, id]);
};

这种写法能避免因为React状态更新的异步性导致的状态不一致问题，比如连续多次调用getValue时，确保每次都基于最新的状态进行更新。

额外提醒 #

永远不要直接修改原状态数组（比如disabled.push(id)），因为React依赖状态的引用变化来触发组件重新渲染，直接修改原数组不会改变引用，组件就不会更新。必须通过创建新数组的方式来更新状态。

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