React中使用扩展运算符更新state时覆盖旧值问题求助

你遇到的问题是因为闭包捕获了旧的state值，加上useEffect的依赖数组不完整，导致每次更新都是基于初始的allImages值添加新图片，看起来就像覆盖了之前的内容。

具体问题分析 #

你的useEffect依赖数组里只写了addButton，但代码里用到了allImages、newImg、scene这些变量，React会捕获effect执行时这些变量的旧值，所以每次调用setImages([...allImages, newImg])时，allImages其实是组件挂载时的初始值，而不是最新的state。

两种解决办法 #

办法1：补全依赖数组

把所有用到的变量都加到依赖数组里，确保effect每次能拿到最新的值：

useEffect(() => {
  if (addButton.current && scene) {
    setImages([...allImages, newImg]);
  }
}, [addButton, allImages, newImg, scene]);

办法2：使用函数式更新（推荐）

React的setState支持传入一个函数，函数参数是当前最新的state值，这样不需要依赖allImages，也能确保每次更新都基于最新的数组：

useEffect(() => {
  if (addButton.current && scene) {
    setImages(prevImages => [...prevImages, newImg]);
  }
}, [addButton, newImg, scene]);

这种方式更稳妥，尤其是在state更新依赖自身的场景下，能彻底避免闭包带来的旧值问题。

另外可以检查下newImg是否每次都是新的有效图片对象，如果newImg重复或未正确生成，也可能出现类似“覆盖”的表现。

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