如何在 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()
}, [])