React报错Cannot destructure property 'id' of 'props.contact' as it is undefined怎么解决

问题原因 #

你在App组件的模板中额外渲染了一个未传contact属性的<ContactCard />实例，该实例获取的props.contact为undefined，解构id属性时触发报错。你通过ContactList循环渲染的ContactCard参数传递是正常的，多余的这个无参数实例才是报错的诱因。

修复方案 #

直接删除App组件return语句中的<ContactCard />这一行代码即可，你需要的联系人卡片已经通过ContactList组件循环渲染完成，该行属于冗余代码。
如果确实需要单独使用ContactCard组件，给它传入对应的contact参数即可：

<ContactCard contact={namelist[0]} />

可选优化建议 #

• 可以给ContactCard添加属性兜底逻辑，避免后续未传参时直接报错：

// 解构时添加兜底空对象
const { id, name, email } = props.contact || {};

• 循环渲染ContactCard时添加唯一key属性，避免React抛出列表key警告：

const renderContact = props.names.map((contact) => {
  return <ContactCard key={contact.id} contact={contact} />;
});

• 你当前的namelist数组中后两个元素的id均为"2"，建议修改为唯一值，避免列表渲染、数据匹配时出现异常。

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