React useState状态更新需双击生效，如何等待状态更新后执行操作？

问题根源 #

你碰到的双击才能生效的问题，核心原因是useState的更新是异步批量执行的。调用setUser之后，组件不会立刻重新渲染，user变量依然是更新前的旧值，所以此时执行props.getuser(user)传递的是旧状态。第一次点击只是完成了状态更新但传了旧值，第二次点击时状态已经更新完毕，传递的才是新值，因此需要双击。

修复方案 #

方案1：直接使用处理后的输入值（最简单） #

既然你已经拿到了输入的enteredUser，处理后的值就是要设置的新user，直接把这个值传给props.getuser即可，无需等待状态更新：

import React, { useState } from "react";

function Search(props) {
    const [user, setUser] = useState("tab21");

    const selectUser = (enteredUser) => {
        const newUser = enteredUser === "" ? "tab21" : enteredUser;
        setUser(newUser);
        // 直接用处理后的newUser，跳过状态更新等待
        props.getuser(newUser);
        console.log("user in search", newUser);
    };

    return (
        <div className="bg-black w-full p-2 flex px-4 space-x-3">
            <input
                type="text"
                name="user"
                id="user"
                placeholder="tab21"
                className="p-1 w-4/5 rounded-md"
                required
            />
            <button
                type="submit"
                className="p-1 w-1/5 bg-green-500 rounded-md text-white hover:bg-emerald-500"
                onClick={() =>
                    selectUser(document.getElementById("user").value)
                }
            >
                Search
            </button>
        </div>
    );
}

export default Search;

方案2：用useEffect监听状态变化（适合依赖状态的场景） #

如果后续逻辑必须依赖更新后的user状态，用useEffect监听user的变化，当状态更新完成后自动执行后续操作：

import React, { useState, useEffect } from "react";

function Search(props) {
    const [user, setUser] = useState("tab21");

    // 监听user状态变化，更新完成后执行逻辑
    useEffect(() => {
        props.getuser(user);
        console.log("user in search", user);
    }, [user, props.getuser]); // 依赖项：user或getuser变化时触发

    const selectUser = (enteredUser) => {
        setUser(enteredUser === "" ? "tab21" : enteredUser);
    };

    return (
        <div className="bg-black w-full p-2 flex px-4 space-x-3">
            <input
                type="text"
                name="user"
                id="user"
                placeholder="tab21"
                className="p-1 w-4/5 rounded-md"
                required
            />
            <button
                type="submit"
                className="p-1 w-1/5 bg-green-500 rounded-md text-white hover:bg-emerald-500"
                onClick={() =>
                    selectUser(document.getElementById("user").value)
                }
            >
                Search
            </button>
        </div>
    );
}

export default Search;

额外优化：避免直接操作DOM获取输入值 #

React推荐用受控组件或useRef获取输入值，这里改成受控组件更符合React设计模式：

import React, { useState, useEffect } from "react";

function Search(props) {
    const [user, setUser] = useState("tab21");

    useEffect(() => {
        props.getuser(user);
        console.log("user in search", user);
    }, [user, props.getuser]);

    return (
        <div className="bg-black w-full p-2 flex px-4 space-x-3">
            <input
                type="text"
                name="user"
                placeholder="tab21"
                className="p-1 w-4/5 rounded-md"
                required
                value={user}
                onChange={(e) => setUser(e.target.value)}
            />
            <button
                type="submit"
                className="p-1 w-1/5 bg-green-500 rounded-md text-white hover:bg-emerald-500"
                onClick={() => {
                    const finalUser = user === "" ? "tab21" : user;
                    setUser(finalUser);
                }}
            >
                Search
            </button>
        </div>
    );
}

export default Search;

内容的提问来源于stack exchange，提问作者tab21