noArrayIndexKey
¥Summary
-
规则生效日期：
v1.0.0¥Rule available since:
v1.0.0 -
诊断类别：
lint/suspicious/noArrayIndexKey¥Diagnostic Category:
lint/suspicious/noArrayIndexKey -
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 error。
¥The default severity of this rule is error.
-
此规则属于以下域：
¥This rule belongs to the following domains:
-
来源：
¥Sources:
-
¥Same as
react/no-array-index-key
-
¥How to configure
{ "linter": { "rules": { "suspicious": { "noArrayIndexKey": "error" } } }}¥Description
不鼓励在键中使用数组索引。
¥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-${index}`} >foo</Component>
│ ^^^^^
3 │ });
4 │
ℹ This is the source of the key value.
> 1 │ something.forEach((Element, index) => {
│ ^^^^^
2 │ <Component key={`test-key-${index}`} >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>});¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号