Javascript 在react中，键道具被剥离

我正在生成包含以下内容的TSX元素列表：

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

this.productsModel=this.state.products.map（o=>(

但是，react警告我：

警告：列表中的每个孩子都应该有一个唯一的“键”道具

因此，根据推荐做法[1]，我添加了：

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

this.productsModel=this.state.products.map（（o，i）=>(

但是无论元素是什么（

Grid.Column

，

div

等），在渲染时都会去掉

key={i}

。 怎么会这样？怎么解决

---

[1]

关键元素不应该传递给DOM，它是一个仅用于React优化的保留道具

因此，当您添加类似于

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

this.productsModel=this.state.products.map（（o，i）=>(

键甚至没有传递到Grid.Column组件，而是在实际传递所有道具时由read剥离

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

键用于react以跟踪渲染的元素，因此 如果删除了一个元素或对列表进行了排序，则不需要这样做 重新安装所有组件，但在安装过程中比较正确的元件 虚拟DOM比较。通过这种方式，它实际上提高了性能

---

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

请仔细阅读文档。如果项目可能会更改，因为@prasanth说react不建议对键使用索引。react也建议更好地解释这一点。实际上，这不是一个问题，因为我没有生成元素。元素定义良好、有序，并从数据库中获取。精细、唯一的\u id（

o.id

，使用

shortid

生成）。但这不回答“如何删除警告”。添加关键道具应删除警告。否则，警告可能来自其他映射循环，但关键道具已被剥离（但不是id）。我仍然有

的警告，它变成了

我的意思是，一旦你添加了一个钥匙道具，警告应该消失。如果没有，也许你在其他地方收到警告。在回答中，你说“钥匙（…）被读取剥离”，在评论中，“一旦你添加了一个钥匙道具”。你能澄清一下吗？