我正在尝试做一些小反应,但是在这里我遇到了一些错误:
无法读取未定义的属性“名称”
请问有人可以帮我吗?
import React, {useState, useEffect} from 'react';
import FriendProfile from './FriendProfile';
import Button from './Button';
const Friend = () => {
const [friend, setFriend] = useState({})
async function getFriend() {
try{
const response = await fetch('https://www.randomuser.me/api?results=1')
const data = await response.json()
const [item] = data.results;
setFriend(item)
}catch(err){
console.log(err)
}
}
useEffect(() => {
getFriend()
}, [])
return (
<div>
<Button getFriend={getFriend} />
<FriendProfile />
</div>
);
};
export default Friend;
和FriendProfile组件为:
import React from 'react';
const FriendProfile = ({friend}) => {
return (
<ul>
<li>{friend.name.first}</li>
</ul>
);
};
export default FriendProfile;
答案 0 :(得分:1)
您忘记将<FriendProfile />
对象传递给friend
组件。在子组件中,它尝试像({friend})
一样进行分解,但是那里没有任何价值。这就是为什么您收到该错误消息的原因。
尝试通过以下操作:
<FriendProfile friend={friend} />
然后在<FriendProfile>
组件中,您需要执行其他条件渲染:
<ul>
{
friend.name &&
<li>{friend.name.first}</li>
}
</ul>
从技术上讲,我们正在检查friend.name
是否有价值。 API调用返回并更新状态后,它将使用<li>
对象的名字来渲染friend
元素。
我希望这会有所帮助!