React - setState 在单击延迟后得到更新

Question

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

从 '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 钩子中添加打印消息逻辑。

React - setState 在单击延迟后得到更新

React - setState gets updated after one click delay

reactjs

counter

setstate

react-functional-component