javascript - 在 react 关键 Prop 被剥离

Question

我正在生成一个 TSX 元素列表:

    this.productsModel = this.state.products.map(o => (
            <Grid.Column key>

但是，react 警告我:

Warning: Each child in a list should have a unique "key" prop.

因此，在推荐的做法 [1] 中，我补充说:

    this.productsModel = this.state.products.map((o, i) => (
            <Grid.Column key={i}>

但是 key={i}无论元素是什么( Grid.Column 、 div 等)，都会在渲染时被去除。
怎么会？如何解决这个问题？

[1] https://reactjs.org/docs/lists-and-keys.html#keys

Answer 1

key 元素不应该传递给 DOM，它是仅用于 React 优化的保留 Prop

所以当你添加键时

  this.productsModel = this.state.products.map((o, i) => (
        <Grid.Column key={i}>

键甚至没有传递给 Grid.Column 组件，而是在实际传递所有 Prop 时被 read 剥离

您还需要为从 map 函数中返回的元素提供唯一键

Key is provided for react to keep track of elements being rendered, so that if an element is deleted or the list is sorted, it need not re-mount everything but compares the correct elements during its virtual DOM comparison. In this way it actually improves performance

即使删除了警告，使用索引键也不会提供太多好处。最好使用产品数组中每个产品对象的唯一 ID 作为键