React - 更改数组的状态无法正确呈现
好粪米克
我试图根据用户单击的元素将数据添加到各种索引中的数组中，但数组的最后一个元素会不断重新呈现。
我相信问题始于在单独的组件中呈现的数组元素并返回到包含状态的主组件。
这是基本上封装问题的示例代码。
状态（正确）：
实际呈现的内容：
乔丹·伯内特
在你的 Letter 组件中，你在类实例上设置了一个“字母”属性， ( this.letter) 而不是使用 React 的内置方法来管理道具和状态 ( this.props.letter)
因为您在 的 render 方法中使用数组索引作为键，所以app.js在重新渲染列表时，React 会将现有组件保留在该索引处。因为您的 'letter' 属性在该组件上没有改变，您将获得相同的文本。
简而言之，使用 props 和 state 来存储信息。避免this.{variableName}在组件中进行设置，除非您要存储组件（或其子组件）渲染不需要的信息。
在您的情况下，您需要将字母组件的渲染方法从
render() {
return this.letter.text
}
至
render() {
return this.props.letter.text
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
状态数组在 React.js 中无法正确呈现
- 2
如何在React中更改数组元素的状态
- 3
React 无法在一行中呈现数组（状态）
- 4
React App 无法正确呈现
- 5
在 React 组件的状态中修改数组
- 6
React-呈现先前状态更改后立即更改状态
- 7
React.js无法正确呈现信息
- 8
无法在React中正确呈现Table
- 9
当键相同时，值更改后 React 输入无法正确呈现
- 10
react-bootstrap Navbar无法在React js中正确呈现
- 11
React.js没有正确呈现我的状态
- 12
如何更改数组javascript中对象的属性（React Native）
- 13
使用react hook setState更改数组中的变量
- 14
在 React 中更改数组项的文本：undefined 不是函数
- 15
React组件不会在状态更改时重新呈现
- 16
状态更改后，React Native ListView行未重新呈现
- 17
状态更改后功能组件不会重新呈现[React]
- 18
状态更改后，react-redux组件未重新呈现
- 19
React不会在状态更改时重新呈现
- 20
当父状态更改时，React不呈现子级
- 21
React：子组件未在父状态更改时呈现
- 22
无法使用useState更改React状态
- 23
React 无法将状态值传递给状态数组
- 24
在ReactJS中状态更改后，内嵌样式无法正确呈现
- 25
无法在react-native中呈现对象数组
- 26
如何在React中正确更改2个状态？
- 27
React / JavaScript添加到数组不会更改数组长度
- 28
javascript：React-向对象添加数组会更改数组的格式
- 29
React-处于循环状态的项目作为处于状态的数组数据-重新呈现项目
我来说两句