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

Question

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

{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 的新元素显示在最后一个索引中。

在此处输入图片说明

Answer 1

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

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

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

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

有关这方面的更多信息，请参阅 React 的列表和键文档。

另外，请参阅这篇关于key prop 的深入文章，特别是关于何时基于索引的 key prop 的总结。