React组件报错：Cannot read properties of undefined (reading 'id') 求助

问题描述 #

在Udemy课程学习React时，编写的FriendList组件触发以下错误：

App.jsx:62 Uncaught TypeError: Cannot read properties of undefined (reading 'id') at App.jsx:62:45
at Array.map () at FriendList (App.jsx:61:16)
错误发生组件链：FriendList → div → div → App

错误原因 #

核心问题是添加好友的参数传递与接收不匹配：

• FormAddFriend组件调用onAddFriend(newFriend)时，直接传入了完整的好友对象
• 但App组件的handleAddFriend函数用({ friend })解构参数，试图从传入值中读取friend属性——但实际传入的就是好友对象本身，不存在friend属性，导致friend变量为undefined
• 最终undefined被添加到friends数组，FriendList遍历数组时，尝试读取friend.id就触发了TypeError

修复方案 #

两种修复方式任选其一即可：

方式1：修正handleAddFriend的参数接收逻辑 #

将解构改为直接接收参数：

const handleAddFriend = (friend) => {
    setFriends((friends) => [...friends, friend]);
};

方式2：修正FormAddFriend的参数传递逻辑 #

调用onAddFriend时将好友对象包装在friend属性中：

onAddFriend({ friend: newFriend });

验证修复 #

修改完成后重新添加好友，friends数组会正确存入完整的好友对象，FriendList遍历读取friend.id时将不再报错。

内容的提问来源于stack exchange，提问作者Shane Htet Aung