使用useState向数组添加（而非更新）对象数组的正确实现方式

你当前用push()直接修改prev状态数组的做法不符合React状态不可变的要求——push()会直接改变原数组，React无法可靠检测到状态变化。下面是用数组扩展运算符等符合规范的方式实现你的需求：

修改后的代码（扩展运算符方案） #

const [images, setImages] = useState(data.images)
const [prev, setPrev] = useState([])

const removeImage = (image) => {
    // 基于原prev数组创建新数组，添加当前images进去
    setPrev([...prev, images])
    // filter本身返回新数组，此处写法合规
    setImages(images.filter(i => i.id !== image.id))
}

原理说明 #

• [...prev, images]会复制原prev数组的所有元素，然后在末尾追加当前的images数组，生成一个全新的数组，完全不会修改原状态。
• React要求状态必须通过useState返回的更新函数传递新值来更新，这样组件才能正确触发重新渲染，状态变化也能被可靠跟踪。

其他可选方案 #

你也可以用concat方法实现相同效果，语法更简洁：

setPrev(prev.concat(images))

这样修改后，prev数组的最终结构会和你之前用push()得到的完全一致，但完全遵循了React的状态管理规范。

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