如何在 useState 中处理 fetch API 结果

Question

我只想知道我在这里错过了什么：在 setFriend 之后我尝试控制台日志（朋友）但我得到了一个空数组，有人可以解释一下:)

import React, { useState } from 'react';
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 result = await response.json()
            await setFriend(result)
            console.log(friend)

        }catch(err){
            console.log(err)
        }

    }

    return (
        <div>
            <Button getFriend={getFriend}/>
        </div>
    );
};

export default Friend;

Answer 1

使用useEffect

async function getFriend() {
        try{
            const response = await fetch('https://www.randomuser.me/api?results=1')
            const result = await response.json()
            await setFriend(result)
            console.log(friend)

        }catch(err){
            console.log(err)
        }

    }

useEffect(() => {
    getFriend()
}, [])