时间戳

首页 > 解决方案 > React.js：我使用了 setstate 但它仍然不能同时重新渲染

javascript - React.js：我使用了 setstate 但它仍然不能同时重新渲染

问题描述

我有一个列表，其中包含许多对象，如下所示：

[{id: 3, kategori: 'Kultur', name: 'Topkapı Sarayı',},{id: 5, kategori: 'Diger',name: 'Topkapı Sarayı', description: "xxxx"},]

我想通过（上一个，下一个）按钮在卡片上一个一个地返回这个列表的对象。所以我创建了一个计数器并定义了增量（用于下一个按钮）和减少（用于上一个按钮）功能。然后我用这个计数器作为列表的索引。最后我像这样映射了这个列表：

this.viwedList = [ myList()[this.state.counter] ].map((tur) => (
            <CreatContent
            
                turName={tur.name}
                img={tur.img}
                country={tur.country}
                increment={this.increment}
                reduce={this.reduce}
            />
        ));
        this.setState(() => {
            return {
                mainContent: this.viwedList
            };
        });

当我单击上一个和下一个按钮时，计数器值会增加和减少。主要问题是显示的对象不会立即更改，当我单击另一个类别（列表）然后返回同一张卡片时，它会更改。

[issua 的第一个图像][1] [issua 的第二个图像][2] [issua 的最后一个图像][3]

[1] ： https ://i.stack.imgur.com/mjzRf.jpg [ 2 ]： https ://i.stack.imgur.com/7tCVA.jpg [3]： https://i.stack。 imgur.com/qqS2E.jpg

标签： javascriptreactjsstatesetstate

解决方案

当您从数组渲染对象时，它们需要具有唯一的key属性。这让 React 可以跟踪它们，因此它可以知道在新渲染中需要更新哪些内容。

如果没有密钥，React 可能无法更新组件，因为它无法识别它们已更改，这就是您所看到的行为。

您可以在文档中阅读更多内容。

推荐阅读