React中Invalid prop `age`传入User组件的类型错误排查

遇到如下错误：

Invalid prop age 传递给 User 组件。
报错位置：User (http://localhost:3000/main.46b6535cc35ca7137599.hot-update.js:27:5)

以下是相关代码：

App.js 文件代码 #

import User from './components/User.js';
import React from "react";

function App() {
return (
<>
<User
  name="Emir"
  surname="Demirgezer"
  isLoggedIn={true}
  age="20"
  friends = {["Ayşe","Fatma","Hayriye","Haydi","Çiftetelliye"]}
/>
</>
);
}

export default App;

User.js 文件代码 #

import PropTypes from "prop-types";

function User ({name,surname,age, isLoggedIn, friends}) {
return(
    <>
        <h1>
            {isLoggedIn ? `${name} ${surname} (${age})`: "您未登录。"}
        </h1>

          {
          friends.map((friend)=>
            <div key={friend.id}>{friend}</div>
        )
        }
    </>
);
}

User.propTypes = {
name : PropTypes.string.isRequired,
surname: PropTypes.string, 
isLoggedIn: PropTypes.bool,
age: PropTypes.oneOfType([ // OneOfType 用于指定多种允许的属性类型
  PropTypes.string, PropTypes.number
]),  
friends: PropTypes.array,
};

export default User;

请问为何会出现这个prop类型错误？

错误提示看似指向age属性，但实际问题出在friends数组的遍历逻辑上，和age无关：

你在User组件中遍历friends时，使用friend.id作为元素的key，但你的friends数组里存储的是纯字符串（比如"Ayşe"），字符串并没有id属性，所以friend.id的值是undefined。当React渲染列表时，如果多个元素的key重复（这里都是undefined），会触发内部渲染异常，这种异常会干扰PropTypes的错误提示机制，导致错误信息错误地指向了age属性。

修复方法 #

把friends遍历的key改成字符串本身即可（因为数组中每个名字都是唯一的）：

friends.map((friend)=>
  <div key={friend}>{friend}</div>
)

修改后，渲染异常消失，PropTypes的错误提示会恢复正常，你会发现age属性的类型完全符合定义要求（允许字符串或数字），之前的错误是渲染异常导致的误报。

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