useJsxKeyInIterable
诊断类别：lint/correctness/useJsxKeyInIterable
¥Diagnostic Category: lint/correctness/useJsxKeyInIterable
自从：v1.6.0
¥Since: v1.6.0
来源：
¥Sources:
-
与以下相同：
react/jsx-key¥Same as:
react/jsx-key
禁止在迭代器/集合文字中缺少关键属性。
¥Disallow missing key props in iterators/collection literals.
如果元素可能需要 key prop（即数组文字或箭头函数表达式中存在的元素），则发出警告。检查格式、检查导入是否组织好以及 lint
¥Warn if an element that likely requires a key prop—namely, one present in an array literal or an arrow function expression. Check out React documentation for explanation on the why does React need keys.
¥Examples
¥Invalid
[<Hello />];code-block.jsx:1:2 lint/correctness/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Missing key property for this element in iterable.
> 1 │ [<Hello />];
│ ^^^^^^^^^
2 │
ℹ The order of the items may change, and having a key can help React identify which item was moved.
ℹ Check the React documentation.
data.map((x) => <Hello>{x}</Hello>);code-block.jsx:1:17 lint/correctness/useJsxKeyInIterable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Missing key property for this element in iterable.
> 1 │ data.map((x) => <Hello>{x}</Hello>);
│ ^^^^^^^
2 │
ℹ The order of the items may change, and having a key can help React identify which item was moved.
ℹ Check the React documentation.
¥Valid
[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];data.map((x) => <Hello key={x.id}>{x}</Hello>);¥Related links