在反应关键道具被剥离答案

【问题标题】：in react key prop is stripped在反应关键道具被剥离
【发布时间】：2020-08-28 06:27:23
【问题描述】：

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

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

但是，react 警告我：

警告：列表中的每个孩子都应该有一个唯一的“key”属性。

所以按照推荐的做法 [1] 我补充说：

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

但key={i} 在渲染时被剥离，无论元素是什么（Grid.Column、div 等）。怎么会？如何解决？

【问题讨论】：

请仔细阅读文档。 React 不推荐使用 index 作为 key We don’t recommend using indexes for keys if the order of items may change
正如@prasanth 所说，react 不建议对键使用索引。 here are the official docs of keys and indexes 和 here is the post react 建议更好地解释它
其实这不是问题，因为我没有生成元素。元素的定义和排序都很好，可以从数据库中获取。

【解决方案1】：

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

所以当你添加像这样的键时

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

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

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

为 react 提供了键来跟踪正在渲染的元素，所以如果一个元素被删除或列表被排序，它不需要重新安装所有内容，但在其期间比较正确的元素虚拟 DOM 比较。通过这种方式，它实际上提高了性能

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

【讨论】：

很好，unique_id（o.id 使用shortid 生成）。但这并不能回答“如何删除警告”。
添加密钥道具应该会删除警告。否则警告也可能来自其他映射循环
但是 key prop 被剥离（但不是 id）。我仍然收到<Grid.Column id={o.id}> 的警告，它变成了<div id=XXX class="column"。
我的意思是，一旦你添加了一个关键道具，警告就会消失。如果不是，您可能也会在其他地方收到警告
在回答中您说“密钥被（...）通过读取剥离”，并在评论中“一旦添加密钥道具”。你能澄清一下吗？