【问题标题】:React.js: the key value in each child component should be unique?React.js:每个子组件中的键值应该是唯一的?
【发布时间】:2016-11-18 07:45:21
【问题描述】:

我使用 React 呈现数据列表,但数据中的每个项目都没有分配 id 或 uuid 或类似标识属性的东西。我可以使用项目索引作为键吗?喜欢:

data.map((item, index) => {
    <Item key={index}></Item>
})

我关心的是如果页面上的其他一些列表也使用订单索引作为子组件键,这有关系吗?密钥应该是唯一标识吗?

【问题讨论】:

    标签: javascript reactjs


    【解决方案1】:

    该键只需要对该列表是唯一的。

    一开始我也有这种担心。

    来自官方文档:

    请记住,密钥只在其兄弟姐妹中必须是唯一的,而不是 全球唯一。

    密钥应该是稳定的、可预测的和唯一的。不稳定的键(如 由 Math.random()) 产生的那些将导致许多节点 不必要地重新创建,这可能会导致性能下降和 子组件中的丢失状态。

    在此处阅读更多信息:Reconciliation - Keys

    【讨论】:

      【解决方案2】:

      如果您不打算在列表中移动元素,则可以这样做。每次移动元素时,它们都会有不同的索引,因此 react 无法跟踪哪些元素被移动了,哪些元素刚刚改变了它们的数据。

      索引在它们的列表中必须是唯一的,它们可能与其他列表相交。

      【讨论】:

        猜你喜欢
        • 2021-02-19
        • 2020-12-03
        • 1970-01-01
        • 2012-01-07
        • 2022-01-15
        相关资源
        最近更新 更多