如何使用prevState在React中更新数组？插入记录的正确方式

嘿，我注意到你当前的状态更新写法存在一个关键问题——每次调用setState时，你只给dados对象设置了inco或cino属性，这会覆盖掉dados中原有的doc、infe、bene这些属性，导致状态丢失哦！

问题原因 #

React的setState会合并顶层状态，但对于嵌套的对象（比如这里的dados），如果你直接返回一个新的dados对象却没有保留原有属性，就会完全替换掉原来的dados，只留下你新设置的那一个数组。

正确的写法 #

你已经知道不能用push修改原数组（这点做得很棒！），接下来只需要在更新dados时，先展开原有dados的所有属性，再替换目标数组即可：

单独更新inco数组

this.setState(prevState => ({
  dados: {
    ...prevState.dados, // 保留dados里原有的所有属性
    inco: [...prevState.dados.inco, URL.createObjectURL(result)] // 创建新数组并添加元素
  }
}))

单独更新cino数组

this.setState(prevState => ({
  dados: {
    ...prevState.dados,
    cino: [...prevState.dados.cino, URL.createObjectURL(result)]
  }
}))

同时更新两个数组（如果需要）

如果同一个操作需要给两个数组都添加元素，建议合并成一次setState调用，避免多次状态更新导致的不必要渲染：

this.setState(prevState => ({
  dados: {
    ...prevState.dados,
    inco: [...prevState.dados.inco, URL.createObjectURL(result)],
    cino: [...prevState.dados.cino, URL.createObjectURL(result)]
  }
}))

核心思路 #

通过扩展运算符浅拷贝原有的dados对象，确保所有未修改的属性都被保留；同时用扩展运算符创建新的数组，添加新元素，严格遵循React状态不可变的原则，这样就能正确维护整个状态结构啦。

内容的提问来源于stack exchange，提问作者marcelo.delta