父组件重新渲染会导致子组件渲染重复

Question

我有一个URL类似product/:id的组件，并且它有一些子组件。路由和更改参数id时，我再次从服务器获取数据，设置状态，然后重新呈现页面。但是子组件不会重新渲染，它们会再次渲染（所以现在我有两次相同的HTML代码）。

我不知道为什么会这样。

这是我的孩子部分：

listProductCardHTML = this.state.randomList.map((card, index) => {
    return (
        <ProductCard cardContent={card} key={index}>
        </ProductCard>
    )
})

这是JSX：

<div className="box-product product-carousel" id="related-carousel">
    {listProductCardHTML}
</div>

Answer 1

问题似乎是，当您路由到product/:id时，您将一个新的子级推入randomList数组。

因此，代码listProductCardHTML = this.state.randomList.map((card, index)会生成多个JSX元素并进行渲染。

请检查您的setState方法，并检查randomList的设置是否正确。