noArrayIndexKey

诊断类别：lint/suspicious/noArrayIndexKey

¥Diagnostic Category: lint/suspicious/noArrayIndexKey

JSX and TSX

自从：v1.0.0

¥Since: v1.0.0

来源：

¥Sources:

与以下相同：react/no-array-index-key

¥Same as: react/no-array-index-key

不鼓励在键中使用数组索引。

¥Discourage the usage of Array index in keys.

如果项目的顺序可能会发生变化，我们不建议对键使用索引。这可能会对性能产生负面影响，并可能导致组件状态问题。查看 React 的深入解释使用索引作为键的负面影响文档如果你选择不为列表项分配显式键，则 React 将默认使用索引作为键。

¥We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

来源 React 文档

¥Source React documentation

示例

¥Examples

无效

¥Invalid

something.forEach((Element, index) => {
    <Component key={index} >foo</Component>
});

code-block.jsx:2:21 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ something.forEach((Element, index) => {
  > 2 │     <Component key={index} >foo</Component>
      │                     ^^^^^
    3 │ });
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ something.forEach((Element, index) => {
      │                             ^^^^^
    2 │     <Component key={index} >foo</Component>
    3 │ });
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation.

React.Children.map(this.props.children, (child, index) => (
    React.cloneElement(child, { key: index })
))

code-block.jsx:2:38 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ React.Children.map(this.props.children, (child, index) => (
  > 2 │     React.cloneElement(child, { key: index })
      │                                      ^^^^^
    3 │ ))
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ React.Children.map(this.props.children, (child, index) => (
      │                                                 ^^^^^
    2 │     React.cloneElement(child, { key: index })
    3 │ ))
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation.

something.forEach((Element, index) => {
    <Component key={`test-key-${index}`} >foo</Component>
});

code-block.jsx:2:33 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ something.forEach((Element, index) => {
  > 2 │     <Component key={test-key-$&#123;index&#125;} >foo</Component>
      │                                 ^^^^^
    3 │ });
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ something.forEach((Element, index) => {
      │                             ^^^^^
    2 │     <Component key={test-key-$&#123;index&#125;} >foo</Component>
    3 │ });
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation.

something.forEach((Element, index) => {
    <Component key={"test" + index} >foo</Component>
});

code-block.jsx:2:30 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ something.forEach((Element, index) => {
  > 2 │     <Component key={“test” + index} >foo</Component>
      │                              ^^^^^
    3 │ });
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ something.forEach((Element, index) => {
      │                             ^^^^^
    2 │     <Component key={“test” + index} >foo</Component>
    3 │ });
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation.

有效

¥Valid

something.forEach((item) => {
    <Component key={item.id} >foo</Component>
});

something.forEach((item) => {
    <Component key={item.baz.foo} >foo</Component>
});

noArrayIndexKey

示例

无效

有效

相关链接