Question

我试图根据用户单击的元素将数据添加到各种索引的数组中，但是数组的最后一个元素不断被重新渲染。

我认为问题出在将数组元素呈现在单独的组件中并返回到包含状态的主组件中。

Here是基本封装问题的示例代码。

状态（正确）：

实际呈现的内容：

Answer 1

在Letter组件中，您要在类实例（this.letter）上设置一个'letter'属性，而不是使用React的内置方法来管理道具和状态（this.props.letter）

因为在app.js的render方法中使用数组索引作为键，所以当重新渲染列表时，React会将现有组件保留在该索引处。由于该组件的“字母”属性未更改，因此您将获得相同的文本。

简而言之，使用道具和状态来存储信息。除非您要存储不需要呈现组件（或其子级）的信息，否则请勿在组件中设置this.{variableName}。

在这种情况下，您需要从以下位置更改字母组件的呈现方法

render() {
   return this.letter.text
}

收件人

render() {
   return this.props.letter.text
}

Answer 2

问题是您将数组索引用作array.map（）中的“键”，然后干预该索引。根据{{3}}，不建议这样做，并且可能导致不良行为。

改为声明一个单独的ID

this.elements = [{id: 1, text: 'a'}, {id:2, text: 'b'}, {id:3, text: 'c'}]

然后在array.map（）中使用key = {element.id}。

这也应该解决问题。