React列表渲染传递key触发警告问题求助

问题本质 #

key是React专门用于列表元素身份识别的内部特殊属性，它不会被当作普通props传递给子组件。这就是你遇到警告的核心原因。

详细解释 #

1. key的正确用法
   你在父组件的persons.map()里给<Person>组件设置key={person.id}是完全正确的操作——React需要通过key来追踪列表中每个元素的位置和状态，避免不必要的DOM重渲染，防止组件状态混乱。这一步是列表渲染的必要操作。

2. 警告的触发原因
   当你在子组件Person中尝试解构key作为props时，React已经在内部把这个属性过滤掉了，子组件根本拿不到key的值，自然会提示你“key不是一个prop，访问它会返回undefined”。

3. 如果子组件需要用到id怎么办？
   要是你的子组件确实需要用到person.id这类标识，不要通过key传递，而是单独加一个普通props，比如：

   // 父组件中
   const personList = persons.map(person => <Person person={person} id={person.id} key={person.id}/>)
   
   // 子组件中
   const Person = ({person, id}) => {
       // 这里可以正常使用id
       return (
         <div>
           <h2>
             I am {person.name}. My ID is {id}
           </h2>
         </div>
       );
   };
   

总结 #

• key是React内部用的，只需要在列表渲染的最外层组件/元素上设置，不需要（也不能）在子组件中当作props访问
• 子组件需要的额外数据，要通过单独的props传递

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