无法使用 useEffect -React 中获取的数据设置 state

Question

我想在 useEffect 挂钩中发送一个 API 请求，并使用获取的数据设置 state 变量值。 我添加了 2 个 console.log 来检测 state 变量值。 我除了用获取的数据设置第二个日志，但它仍然打印 null。

这是我的代码：

import { useEffect, useState } from "react";
import axios from "axios";
const Test = () =>{
    const [users, setUsers] = useState(null);
    useEffect(()=>{
        const getData = async ()=>{
            const resp = await axios.get("https://jsonplaceholder.typicode.com/todos");
            console.log(users);
            setUsers(resp.data);
            console.log(users);
        };
        getData();
    },[])
    return (
        <div>hello</div>
    )
};

export default Test;

此外，控制台 output 看起来像这样：

null
null

Answer 1

useState的设置器是异步的，因此您的第二个console.log将在users实际更新之前被调用。

为了让它工作，只需将它放在useEffect之外。

import { useEffect, useState } from "react";
import axios from "axios";
const Test = () =>{
    const [users, setUsers] = useState(null);
    useEffect(()=>{
        const getData = async ()=>{
            const resp = await axios.get("https://jsonplaceholder.typicode.com/todos");
            console.log(users);
            setUsers(resp.data);
        };
        getData();
    },[])
    console.log(users);
    return (
        <div>hello</div>
    )
};

export default Test;

或者在另一个专用的useEffect中，通过在 dependencies 数组中传递users 。

import { useEffect, useState } from "react";
import axios from "axios";
const Test = () =>{
    const [users, setUsers] = useState(null);
    useEffect(()=>{
        const getData = async ()=>{
            const resp = await axios.get("https://jsonplaceholder.typicode.com/todos");
            console.log(users);
            setUsers(resp.data);
        };
        getData();
    },[])

    useEffect(()=>{
       console.log(users);
    },[users])

    return (
        <div>hello</div>
    )
};