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 唯一地标识了组件。但是您的密钥是在每次渲染时随机生成的。这就是为什么 React 在每次渲染时都将每个项目都视为一个新组件。

您需要提供一个更可预测的密钥，或者确保每个项目只生成一次随机密钥。