React Redux 嵌套 react-redux 组件：列表中的每个孩子都应该有一个唯一的“key”道具

Question

我有一个 React 组件 Basket 和另一个组件 ProductLine。两个组件都与 react-redux 连接

篮子组件：

function Basket({ basket }) {
    return (
        <Container>
            <Row>
                {basket.items.map(item => (
                    <ProductLine key={item.sku} item={item} ></ProductLine>
                ))}
            </Row>
        </Container>
    )
}

export default connect(state => ({
    basket: state.basket,
}))(Basket);

产品线组件：

function ProductLine({ item }) {
    return (
        <Container>
            <Row className="mb-2">
                <Col md={5}>{item.name}</Col>
            </Row>
        </Container>
    )
}

export default connect((state, ownProp) => ({
    item: ownProp.item
}))(ProductLine)

现在每次我收到此错误时列表中的每个孩子都应该有一个唯一的“关键”道具。

我尝试在 Basket 或 ProductLine 或 Both 中添加 key={item.sku}，但没有成功。每次它显示相同的错误。结果，我的产品线没有正确更新。

这里是 React 组件 SS 来更详细地展示。

在两个组件上添加 Key

依赖关系：

• “反应”：“^17.0.2”，
• "react-dom": "^17.0.2",
• "react-redux": "^7.2.6",
• "react-router-dom": "^6.0.1",
• “反应脚本”：“4.0.3”，
• “redux”：“^4.1.2”，
• “redux-thunk”：“^2.4.0”，

Answer 1

可能有两个原因：

1- 如果你使用 webpack，你忘了重新编译它。

2- item.sku 未定义、为 null 或对于每个项目都不唯一