如何使用useState来设置朋友？

Question

我正在尝试做一些小的练习来做出反应，但是这里我出现了一些错误：

无法读取未定义的属性'名称'

有人可以帮我吗？

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;

Answer 1

您忘记了将<FriendProfile />对象传递给friend组件。在子组件中，它尝试像({friend})一样进行分解，但是那里没有任何值。这就是为什么您收到该错误消息的原因。

尝试通过以下操作：

<FriendProfile friend={friend} />

然后在<FriendProfile>组件中，您需要执行其他条件渲染：

<ul>
    {
        friend.name &&
        <li>{friend.name.first}</li>
    }
</ul>

从技术上讲，我们正在检查friend.name是否有价值。一旦API调用返回并更新了状态，它将使用<li>对象的名字呈现friend元素。

我希望这会有所帮助！