React中handleClick需点击两次才更新显示值问题求助

我设置了一个handleClick函数，调用它时能更新变量状态，但需要点击两次才能让页面显示值同步更新。该功能之前正常运行，现在突然失效，由于还没学版本控制，不清楚修改了哪些内容。

我尝试过给useState变量添加this.，还尝试在同一个onClick中调用两次handleClick，但都没解决问题。

相关代码 #

import React, {useState} from 'react';
import Numbergen from './Numbergen.js';
import Comparenums from './Comparenums.js';

const Guessbox = () => {
    const [userInput, setUserInput] = useState(0);
    const [guess, setGuess] = useState(userInput)
    const [numToGuess, setNumToGuess] = useState(Numbergen());
    const [result, setResult] = useState('')

    const handleChange = (event) => {
        setUserInput(event.target.value);
    };

    const handleClick = () => {
        setGuess(userInput);
        setResult(Comparenums(guess,numToGuess));
    }

    return (
        <div>
            <input
                type="text"
                id="userInput"
                name="userInput"
                onChange={handleChange}
                value={userInput}
            />
            <button onClick={handleClick}>Guess!</button>
            <h2>{result}</h2>
            <h2>{numToGuess}</h2>
        </div>
    );
}

export default Guessbox;

问题根源是React的setState是异步操作：调用setGuess(userInput)后，guess不会立刻更新为最新值，紧接着调用Comparenums(guess, numToGuess)时，用的还是更新前的旧guess值，导致第一次点击时result无法同步正确结果，第二次点击才会用上一次的guess值计算，出现点击两次才生效的情况。

提供两种修复方式：

方式一：直接使用userInput计算结果 #

既然guess的作用是存储提交的userInput，直接用当前的userInput传给Comparenums即可，不用依赖guess的状态：

const handleClick = () => {
    setGuess(userInput);
    setResult(Comparenums(userInput, numToGuess));
}

方式二：用useEffect监听guess变化更新结果 #

如果后续逻辑需要依赖guess状态的变化来更新结果，可添加useEffect钩子，当guess或numToGuess变化时自动计算结果：

import React, {useState, useEffect} from 'react'; // 先导入useEffect

// ... 其他代码保持不变

useEffect(() => {
    if (guess !== 0) { // 跳过初始值0的计算
        setResult(Comparenums(guess, numToGuess));
    }
}, [guess, numToGuess]); // 依赖guess和numToGuess，状态变化时触发

const handleClick = () => {
    setGuess(userInput);
}

另外注意：函数组件中的useState变量不需要加this.，这是类组件的用法，你的尝试方向不对。

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