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

Question

在这篇文章之后， 在 React JSX 中循环，我想通过循环渲染组件来简化我的代码。 但是，我收到警告： Warning Each child in a list should have a unique "key" prop.

确保它是唯一的key应该是什么？ 我尝试将其命名为payload[i] ，但这并没有产生唯一的名称。 请参阅下面的代码和payload数据示例：

      var states = [];
      for(var i = 0; i < payload.length; i++){
        console.log("i " + i);
        states.push(
        <Typography sx={{ fontSize: 14 }} color= {payload[i].fill } >
        {`${payload[i].dataKey} : ${payload[i].value}`}
      </Typography>  )
      }
      return (
      \\ other code
      {states}

      );

Answer 1

如果您知道它在您的项目中是唯一的，请尝试使用payload[i].dataKey或payload[i].name 。 否则，如果渲染之间的顺序不会改变（您不会通过添加/删除项目或对其进行排序来更改数组），则可以使用i作为键。

您使用的payload[i]转换为[object Object]作为字符串，对于所有元素（ Object.toString()将返回[object Object] ） - 所以它不是唯一的。

这是 React Virtual DOM 的协调算法所需要的（当有多个节点时，您需要它们的唯一键，因此当只有一个更改时它不会更新所有节点）。

当孩子有键时，React 使用键将原始树中的孩子与后续树中的孩子进行匹配。

在实践中，找到密钥通常并不难。 您要显示的元素可能已经有一个唯一的 ID，因此键可以来自您的数据：

如果不是这种情况，您可以将新的 ID 属性添加到模型中，或者对部分内容进行哈希处理以生成密钥。 密钥只需要在其兄弟姐妹中是唯一的，而不是全局唯一的。

作为最后的手段，您可以将数组中的项目索引作为键传递。 如果项目从不重新排序，这可以很好地工作，但重新排序会很慢。

当索引用作键时，重新排序也会导致组件状态出现问题。 组件实例根据其密钥进行更新和重用。 如果键是索引，则移动项目会更改它。 结果，诸如不受控制的输入之类的组件状态可能会以意想不到的方式混淆和更新。

Answer 2

它是一个标识符，react 使用它来跟踪优化重新渲染和 dom 中元素的内部状态。

它应该是对象本身的标识符，而不是例如索引。 在列表中查找适合此目的的唯一字符串，例如 ¿dataKey?

  var states = [];
  for(var i = 0; i < payload.length; i++){
    console.log("i " + i);
    states.push(
    <Typography key={payload[i].dataKey} sx={{ fontSize: 14 }} color= {payload[i].fill } >
    {`${payload[i].dataKey} : ${payload[i].value}`}
  </Typography>  )
  }
  return (
  \\ other code
  {states}

  );

Answer 3

您需要在标签中为循环中的每个项目添加一个具有唯一 ID 的键，例如：

<ul>

array.map((value, index) => {

   return(
     
       <li key={index}>
           {value}
       </li> 
   );

});

</ul>

Answer 4

创建列表时，您会收到一条警告，提示您应该为列表项提供密钥。 “键”是创建元素列表时需要包含的特殊字符串属性。 阅读此处了解更多信息： https ://reactjs.org/docs/lists-and-keys.html

Answer 5

让我们假设一个组件在 JSX 中有一个循环，例如，这个循环依赖于一个数组。 如果数组被修改，那么 React 必须重新渲染组件并重新运行循环。 React 必须知道数组中的哪些项目被修改才能正确呈现循环的输出。 这就是我们需要key的原因。 像这样：

Array.map( ( item , index )=>(
<div key={item.id}> { item.name } </div>
))

key必须是唯一的。 您可以使用项目的索引，但这通常是一种不好的做法。 虽然它是唯一的，但是当 - 例如 - 您删除一个数组项时，每个项的索引都会更改。

一个好的做法是为您的项目始终拥有一个唯一的 id 字段（仅当您知道数组将来会被修改时。如果没有，使用index也可以）。 有很多库可以帮助您生成 uuid（如果尚未在服务器端完成）。 检查UUID