React - 一键延迟后setState得到更新[重复]

Question

所以我是 React 的初学者，我正在做一个基本的计数器。我希望计数器在达到 5 时显示成功消息。所以我使用了以下代码

从 'react' 导入 React,{useState,useEffect}; 导入'./Cards.css';

函数规则() {

const [count,setCount] = useState(0);

const [message,setMessage] = useState("");

const handleIncrement = () => {
    setCount(count+1);
    console.log(count);
    printMessage();
};

const handleDecrement = () => {
    setCount(count -1);
    printMessage();
    console.log(count);

};

const printMessage = () => {
    if (count === 5){
        setMessage("This should be displayed on 5");

    }

    else if (count === 10){
        setMessage("Thsi should be displayed on 10");
    }

    else {
        setMessage("");
    }

    

};

return(
    <div>
        <h1>Counter is at {count}</h1>
        <button onClick = {handleIncrement}>+</button>
        <button onClick  = {handleDecrement}> - </button>
        <h4>{message}</h4>
    </div>

);






    

}

导出默认规则；

现在当我运行代码时，它给出了一个计数器，但是当我按下增量按钮时，成功消息出现 6。当我按下减少计数器时，成功消息显示在 4。我检查了日志我意识到计数器显示正确的值，但在控制台中它会在稍后更新。有什么帮助吗？？？

Answer 1

当你使用功能组件时，你应该在 useEffect 钩子中添加打印消息逻辑。