在 React 中,我在循环中重新渲染项目组件时遇到问题。我有一个主要组件,其状态如下:
this.state = {
data: [{...}, {...}, {...}]
}
我迭代此数据:
render() {
const elems = this.state.data.map(item => {
let id = randomId();
return (
<ItemComponent
key={id}
id={id} (...other props) />
)
});
return (
<div>
{elems}
</div>
);
}
该组件具有特殊的带有动画的 CSS 类,因此如果组件被渲染它是动画的(小动画)并且一切正常,但是当我向状态添加一些东西时(另一个“数据”数组对象项)所有项目都被重新渲染所以一切都开始活跃起来。我只想要新的动画。这是重新呈现所有项目的问题。当新的出现在 data
数组中时,不应呈现旧的。我确信这里缺少一些基本的东西。我知道有 shouldComponentUpdate
并且我尝试在我的 ItemComponent
中使用它,但它在那里什么也不做,即使我将它设置为 return false
:/
我能用它做什么?我只是不想重新渲染不会改变并且只是渲染的项目。我只想将新对象添加到 data
数组触发状态更改并再次呈现添加的对象而不是所有项目。我认为 React 可以在内部管理它。或者也许有一种方法可以在我的 ItemComponent
中使用 shouldComponentUpdate
?
我通过以下方式添加新项目:
newArray = this.state.data.slice();
newArray.push({...});
this.setState({data: newArray});
提前致谢。
最佳答案
问题是您的 key
。在 React 中,key
唯一标识组件。但是您的 key 是在每次渲染时随机生成的。这就是为什么 React 在每次渲染时将每个项目都视为一个新组件。
您需要想出一个更可预测的 key ,或者确保每个项目只生成一次随 secret 钥。
关于javascript - React - 循环中的项目作为状态中的数组数据 - 重新呈现项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34247439/