React中Material UI ListItem设置key属性报错，求助原因与解决办法

这个警告不是Material UI的bug，而是React本身对key属性的特殊设计导致的，咱们一步步理清楚：

为什么会出现这个警告？ #

key是React专为列表渲染优化设计的特殊属性——它的作用是帮助React快速识别列表中每个元素的唯一性，从而高效更新DOM。但有个关键规则：React永远不会把key作为组件的props传递下去。

如果你的代码（或者你封装的自定义ListItem组件内部）试图通过props.key去读取这个值，就会得到undefined，同时触发你看到的这条警告。

看你的代码示例：

<ListItem primaryText={video.snippet.title} leftAvatar={<Avatar src={imageUrl} />} key={key} />

你给ListItem添加key的做法是完全正确的（列表渲染时必须给每个子项设置唯一key），问题出在你可能在ListItem组件内部尝试访问这个key值了（比如写了this.props.key）。

怎么解决？ #

如果你确实需要在ListItem内部使用这个标识值，只需要把它用另一个自定义prop名传递即可，比如：

<ListItem 
  primaryText={video.snippet.title} 
  leftAvatar={<Avatar src={imageUrl} />} 
  key={key} // 保留React需要的key属性
  itemId={key} // 用自定义prop传递需要在组件内使用的值
/>

之后在组件内部，通过props.itemId（或者你取的其他名字）来访问这个值，就不会有问题了。

总结 #

• 给列表项设置key是正确且必要的操作，这一步你没做错
• 错误根源是试图在组件内部读取props.key，违反了React的规则
• 用普通prop传递需要的标识值就能解决问题

内容的提问来源于stack exchange，提问作者Pete Thorne