react runtime_error ai_generated true

Warning: Each child in a list should have a unique 'key' prop. See https://reactjs.org/link/warning-keys for more information.

ID: react/missing-key-props

Also available as: JSON · Markdown · 中文
95%Fix Rate
85%Confidence
1Evidence
2023-01-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 16.0.0 active — — —
React 17.0.2 active — — —
React 18.2.0 active — — —

Root Cause

Rendering an array of components or elements without specifying a unique 'key' prop for each item, which hinders React's reconciliation and can cause rendering bugs.

generic

中文

渲染数组中的组件或元素时没有为每个项目指定唯一的 'key' 属性，这会影响 React 的协调过程并可能导致渲染错误。

Official Documentation

https://reactjs.org/docs/lists-and-keys.html#keys

Workarounds

  1. 95% success Provide a stable, unique identifier from your data as the key, e.g., `data.map(item => <Component key={item.id} />)`. If no ID exists, generate a unique key using a library like `uuid`. 
    Provide a stable, unique identifier from your data as the key, e.g., `data.map(item => <Component key={item.id} />)`. If no ID exists, generate a unique key using a library like `uuid`.
  2. 30% success If the list is static and never reordered, use the index as a last resort with a comment documenting the limitation: `data.map((item, index) => <Component key={index} />)` 
    If the list is static and never reordered, use the index as a last resort with a comment documenting the limitation: `data.map((item, index) => <Component key={index} />)`

中文步骤

  1. Provide a stable, unique identifier from your data as the key, e.g., `data.map(item => <Component key={item.id} />)`. If no ID exists, generate a unique key using a library like `uuid`.
  2. If the list is static and never reordered, use the index as a last resort with a comment documenting the limitation: `data.map((item, index) => <Component key={index} />)`

Dead Ends

Common approaches that don't work:

  1. 70% fail

    Index-based keys are unstable if the list can be reordered, filtered, or have items added/removed, leading to incorrect component state and performance issues.

  2. 95% fail

    Random keys cause React to unmount and remount all components on every render, destroying state and causing severe performance degradation.

  3. 90% fail

    Duplicate keys violate the uniqueness requirement and cause React to reuse components incorrectly, leading to unpredictable UI behavior.