React useState如何给对象数组内的Todo项添加元素而不重复生成Todo副本

你的原有代码存在两个问题，最终导致Todo分类重复：

• 直接修改了React状态的prev对象，违反了React状态不可变的设计原则
• 返回新数组时，先插入了修改后的Todo分类，又把整个prev数组做了展开拼接，等于Todo分类被重复插入了两次

方案1：按索引修改（适合分类顺序固定的场景） #

const addItem = () => {
  // 空值校验，避免添加空白无效条目
  if (!text.trim()) return
  setList((prev) => {
    // 浅拷贝原状态数组，不修改原prev
    const newList = [...prev]
    // 仅替换第一个Todo分类的内容
    newList[0] = {
      ...newList[0],
      items: [text, ...newList[0].items]
    }
    return newList
  })
  setText('')
}

方案2：按标题匹配修改（适合分类顺序可能调整的场景，兼容性更强） #

const addItem = () => {
  if (!text.trim()) return
  setList((prev) => {
    // 遍历所有分类，仅修改title为Todo的分类
    return prev.map(category => {
      if (category.title === 'Todo') {
        return {
          ...category,
          items: [text, ...category.items]
        }
      }
      // 其他分类原样返回
      return category
    })
  })
  setText('')
}

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