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类，因此如果组件被渲染，则它是动画的（小动画）并且一切正常，但是当我向状态添加内容时（另一个＆＃39;数据＆＃39;数组对象项））所有项目都被重新渲染，所以所有项目都开始动画。我想要新的动画。这是重新渲染所有项目的问题。当新的出现在data数组中时，不应渲染旧的。我确信这里有一些基本的东西。我知道有shouldComponentUpdate并且我尝试在我的ItemComponent中使用它，但它在那里什么都不做，即使我将它设置为return false：/

我该怎么办？我只是不想重新渲染那些不会改变而且只是渲染的物品。我只想在data数组触发器状态更改中添加新对象，并再次渲染添加的对象而不是所有项目。我认为React可以在内部管理它。或者也许有一种方法可以在shouldComponentUpdate中使用ItemComponent？

我按以下方式添加新项目：

newArray = this.state.data.slice();
newArray.push({...});
this.setState({data: newArray});

提前致谢。

Answer 1

问题在于你key。在React中，key唯一标识组件。但是你的密钥是在每个渲染上随机生成的。这就是为什么React将每个项目视为每个渲染的新组件。

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

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

1 个答案: