ReactJS：如何在数组状态中添加新元素并为它们保留“prevState”？答案

【问题标题】：ReactJS: How to add a new element in array state and to preserve "prevState" for them?ReactJS：如何在数组状态中添加新元素并为它们保留“prevState”？
【发布时间】：2020-01-05 21:26:24
【问题描述】：

我的数组状态正在渲染，我可以毫无问题地推送新元素，但是，当我尝试添加特定索引时，反应正在改变先前元素的状态。之前状态的例子：

{this.state.numOfRows.map((v, k) => (
    <Item add={this.add.bind(this)} key={`item-${k}`} index={k} item={v} />
))}

这将呈现一个带有 option = 0 的 html 元素；因此，当我调用 this.add(index) 道具时，我可以在我的数组上再推送 2 或 3 个元素，并更改 1 和 2 的选项。但是，例如，当我调用 this.add(index) 在索引 2 中添加一个新元素时，我之前选择的选项会被更新，并且选项中带有 0 的新元素会显示在最后一个索引中。

enter image description here

【问题讨论】：

您的问题是您正在使用key 的数组索引。 Instaed 使用更具体的东西，例如数据库中的唯一 ID。第二个问题是您如何添加项目。在数组的副本上使用splice 以在索引arr.splice(idx, 0, item) 处变异/插入
谢谢@JohnRuddell。现在可以了！

标签： javascript reactjs

【解决方案1】：

在 React 中渲染列表时，您应该指定一个 key，它基于正在渲染的项目的唯一标识，而不是该项目在源数组中的（当前）索引/位置。

在您的情况下，如果numOfRows 数组中的每个项目都有一个唯一标识符（即someUniqueId，如下所示），那么这将是与每个<Item /> 的key 属性一起使用的更好选择@被渲染：

{
  this.state.numOfRows.map((v, k) => 
      (<Item add={this.add.bind(this)} 
             key={`item-${ v.someUniqueId }`} 
             index={k} 
             item={v} />))
}

这样做的原因是 React 根据 key 确定渲染列表中的项目是否需要更新。当一个项目的key（基于它的索引）保持不变时，会出现渲染异常，尽管该项目的实际数据发生了变化。

有关这方面的更多信息，请参阅 React 的 Lists and Keys 文档。

另外，请参阅in-depth article on the key prop，特别是this summary of when an index based key prop is okay。

【讨论】：