React不修改原对象如何将imageKeys值生成URL插入嵌套ImageList的images数组

错误原因 #

• 你写的扩展运算代码仅生成了新数组，没有赋值给任何变量，属于无效运算
• 没有做逐层对象复制，直接操作原对象属性会违反不可变原则，修改原始输入对象
• 你遇到的「扩展运算符只能用于最后一个形参」报错，是你实际运行的代码中把扩展运算符用在了函数非末尾形参的位置，你贴出的这段代码中的扩展运算符语法本身没有问题，只是没有赋值所以无效。

正确实现 #

你可以通过数组map方法批量生成url对象，再通过逐层解构的方式生成全新的对象，完全不会修改原始输入：

// 1. 批量生成新的images数组
const newImages = myInitialStateFromParent.imageKeys.map(key => ({
  url: `${baseUrl}/${key}`
}))

// 2. 逐层解构生成新对象，所有原始属性保留
const newState = {
  ...myInitialStateFromParent, // 复制第一层所有属性
  ImageList: {
    ...myInitialStateFromParent.ImageList, // 复制ImageList下的所有原有属性
    images: newImages // 仅替换images数组为新生成的内容
  }
}

React useEffect 场景适配 #

如果是在子组件的useEffect中更新本地状态，写法如下，注意把依赖项补全：

const [localState, setLocalState] = useState(/* 你的初始值 */)

useEffect(() => {
  // 边界处理，避免imageKeys为空时报错
  if (!myInitialStateFromParent?.imageKeys) return
  const newImages = myInitialStateFromParent.imageKeys.map(key => ({
    url: `${baseUrl}/${key}`
  }))
  setLocalState(prev => ({
    ...prev,
    ...myInitialStateFromParent,
    ImageList: {
      ...myInitialStateFromParent.ImageList,
      images: newImages
    }
  }))
}, [myInitialStateFromParent.imageKeys, baseUrl])

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