React中useState、setState更新不及时，如何获取最新的当前值？

React 的 useState 状态更新是异步批量执行的，调用setUsername后，当前函数作用域内捕获的username还是本次渲染周期的旧值，状态更新要等到本次事件回调执行完成、React 触发重渲染后才会生效，因此同步打印、发请求拿到的都是旧值。

方案1：直接使用事件对象的最新值（最适配当前场景） #

你需要的新值已经存在于event.target.value中，无需等待状态更新，直接使用该值即可：

import { useState } from "react";
import Axios from "axios";

const [username, setUsername] = useState("");

const onChangeUsername = (event) => {
    const newUsername = event.target.value;
    setUsername(newUsername);
    console.log(newUsername)
    Axios.post(hostServer + "user/guestCheck", {
        username: newUsername
    }).then((response) => {
        console.log(response);
    });
}

<input 
    required 
    type="text" 
    name="username" 
    placeholder="Username" 
    autoComplete="off"
    onChange={onChangeUsername} 
></input>

方案2：通过useEffect监听状态变化触发后续操作 #

如果后续逻辑必须依赖状态更新完成后的值，可以把请求逻辑放到useEffect中，监听username的变化：

import { useState, useEffect } from "react";
import Axios from "axios";

const [username, setUsername] = useState("");

// 每次username变化时自动触发
useEffect(() => {
    // 避免初始空值发请求可以加判断
    if (username) {
        console.log(username);
        Axios.post(hostServer + "user/guestCheck", {
            username: username
        }).then((response) => {
            console.log(response);
        });
    }
}, [username])

const onChangeUsername = (event) => {
    setUsername(event.target.value);
}

<input 
    required 
    type="text" 
    name="username" 
    placeholder="Username" 
    autoComplete="off"
    onChange={onChangeUsername} 
></input>

内容的提问来源于stack exchange，提问作者Donn Frederick Lucas