React中setState修改数组单个对象值后出现undefined问题

你的代码出现undefined的原因很明确：forEach方法本身没有返回值（执行后返回undefined），所以把forEach的结果传给setImages，相当于把state设置成了undefined。另外，直接修改e.x += 10属于改动原state对象，违反了React的不可变更新原则，可能导致组件无法正常重新渲染。

正确的写法应该用map方法生成新数组，同时对目标对象创建副本再修改：

setImages(
  allImages.map((e) => {
    if (e.id === 1) {
      // 创建新对象，复制原有属性并更新x值
      return { ...e, x: e.x + 10 };
    }
    // 其他对象直接返回原对象即可
    return e;
  })
);

map会遍历原数组并返回一个全新的数组，符合React对state更新的要求，这样setImages就能接收到正确的更新后数组，state也能正常更新，组件会根据新的state重新渲染图片。

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