javascript - React - 循环中的项目作为状态中的数组数据 - 重新呈现项目

Question

在 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});

提前致谢。

Answer 1

问题是您的 key 。在 React 中，key 唯一标识组件。但是您的 key 是在每次渲染时随机生成的。这就是为什么 React 在每次渲染时将每个项目都视为一个新组件。

您需要想出一个更可预测的 key ，或者确保每个项目只生成一次随 secret 钥。