如何使用useState处理获取API结果

时间:2019-12-14 17:32:23

标签: javascript reactjs

我只想知道我在这里错过了什么: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;

1 个答案:

答案 0 :(得分:-2)

使用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()
}, [])