状态未结合useEffect更新

Question

我正在制作一个聊天应用程序，我想获取聊天内容，但这个问题来了。

response.data

一切正常，但状态未更新，并且在设置状态后为

console.log("chats updated:", chats)

打印 null。

import axios from 'axios';
import React, { useEffect, useState } from 'react';

function Chats() {
    const [chats, setChats] = useState(null);

    useEffect(() => {
        const chload = async () => {
            try {
                const response = await axios.post('http://localhost:3001/getchats', {}, { withCredentials: true });
                if (response.data) {
                    console.log(response.data); 
                    setChats(response.data);
                    console.log("chats updated:", chats); 
                }
            } catch (error) {
                console.error('Error fetching chats:', error);
            }
        };
        chload();
    }, []);

    return (
        <>
            {chats !== null ? (
                <>
                    <p>{chats.name}</p>
                </>
            ) : (
                <p>Loading chats...</p> 
            )}
        </>
    );
}

export default Chats;

Answer 1

当您使用

useState

时，不要假设状态会立即更新。 React 批量状态更新并在组件渲染后触发“重新渲染”。更新后的状态仅在组件重新渲染后才可见，这通常发生在 useEffect 内的函数之后。换句话说，状态更新是

asynchronous

，并且新的状态值在调用setState后不会立即可用。您需要依赖组件的下一个渲染周期来访问更新后的状态。

检查这个

setstate-in-reactjs-async-instead-of-sync