React函数组件key属性设默认值触发PropTypes警告问题

核心原因 #

key是React官方保留的特殊属性，仅用于React内部虚拟DOM Diff阶段识别列表元素，不会作为普通props传递到组件内部。你在组件标签上声明的key属性，会被React单独提取存储，和props对象平级（你打印的组件对象日志也验证了这一点：key字段在props对象外部），因此组件内部永远无法从props中获取到key的值，你给key设置必填PropTypes校验自然会触发警告。

你实际运行没有问题，是因为你给key设置了默认值兜底，但这个默认值永远不会被外部传入的member.id覆盖，完全没有起到你预期的作用。

解决方案 #

• 删除FamilyListItem.propTypes中的key: PropTypes.string.isRequired这行规则，不需要也不应该对key做PropTypes校验。
• 删除FamilyListItem参数解构中的key = DEFAULT_LIST_KEY()声明，该属性无法接收外部传入值，属于无效代码。
• 如果你组件内部确实需要用到这条数据的唯一标识，直接使用已传入的familyMember.id即可；如果要单独传递该标识，可以新增普通props比如itemId={member.id}传递，不要占用key这个保留属性。

你给列表元素传入member.id作为key的实践是正确的，这部分代码不需要调整。

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