Javascript 反应-更改数组的状态不会'；无法正确渲染

我试图根据用户单击的元素向数组添加不同索引中的数据，但数组的最后一个元素会不断被重新渲染

我相信问题是从在单独组件中呈现的数组元素开始的，并返回到包含状态的主组件

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

说明（正确的）：

实际渲染的内容：

---

在Letter组件中，您正在类实例上设置“Letter”属性（

this.Letter

），而不是使用React的内置方法来管理props和state（

this.props.Letter

）

因为您在

app.js

的渲染方法中将数组索引用作键，所以React将在重新渲染列表时将现有组件保留在该索引处。因为您的“字母”属性在该组件上没有更改，所以您将得到相同的文本

简而言之，使用道具和状态来存储信息。不要在组件中设置

this.{variableName}

，除非您正在存储组件（或其子组件）渲染不需要的信息

在本例中，您需要将字母组件的渲染方法从

render() {
   return this.letter.text
}

到

---

在Letter组件中，您正在类实例上设置“Letter”属性（

this.Letter

），而不是使用React的内置方法来管理props和state（

this.props.Letter

）

因为您在

app.js

的渲染方法中将数组索引用作键，所以React将在重新渲染列表时将现有组件保留在该索引处。因为您的“字母”属性在该组件上没有更改，所以您将得到相同的文本

简而言之，使用道具和状态来存储信息。不要在组件中设置

this.{variableName}

，除非您正在存储组件（或其子组件）渲染不需要的信息

在本例中，您需要将字母组件的渲染方法从

render() {
   return this.letter.text
}

到

---

问题是您使用数组索引作为array.map（）中的“键”，然后干预索引。这是不推荐的，可能会导致不合要求的行为

而是像这样声明一个单独的id

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

并在array.map（）中使用key={element.id}

---

这也应该可以解决问题。

问题是您正在使用数组索引作为array.map（）中的“键”，然后干预索引。这是不推荐的，可能会导致不合要求的行为

而是像这样声明一个单独的id

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

并在array.map（）中使用key={element.id}

---

这也可以解决问题。

我不明白你想做什么。您希望单击按钮将新元素添加到渲染的数组中。但是，您希望如何确定在数组中插入新元素的位置？你如何确定新元素是什么？我不明白你想做什么。您希望单击按钮将新元素添加到渲染的数组中。但是，您希望如何确定在数组中插入新元素的位置？如何确定新元素是什么？如何计算新元素的id与现有数据的id之间的关系？一旦在a之后插入d，是否需要重新计算a、b、c的id？不一定，这取决于用例。如果不需要将此信息存储在任何位置，只需为密钥创建一些随机散列即可。这样做的目的是保持这个键的唯一性，以便react唯一地标识子元素。如何计算新元素相对于现有数据id的id？一旦在a之后插入d，是否需要重新计算a、b、c的id？不一定，这取决于用例。如果不需要将此信息存储在任何位置，只需为密钥创建一些随机散列即可。这样做的目的是使该键保持唯一性，以便react唯一地标识子元素。