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

Question

我想在 useEffect 挂钩中发送一个 API 请求，并使用获取的数据设置状态变量值。我添加了 2 console.log 用于检测状态变量值。我除了用获取的数据设置第二个日志，但它仍然打印 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;

此外，控制台输出如下所示：

null
null

Answer 1

useState 的 setter 是异步的，因此您的第二个 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 中，通过在依赖项数组中传递 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>
    )
};

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

Cannot setting the state with the data fetched in useEffect -React

javascript

asynchronous

reactjs

use-effect