这是一个显示数字（最初为0）和一个按钮的组件，单击该按钮可递增该数字。如果数字为10，则还会显示庆祝消息。
function App() {
const [count, setCount] = React.useState(0);
const [milestone, setMilestone] = React.useState(false);
const increment = () => {
setCount(count + 1);
if (count === 10) {
setMilestone(true);
} else {
setMilestone(false);
}
};
return (
<div className="App">
<h1>{count}</h1>
<button onClick={increment}>+1</button>
{milestone ? <h1>Happy aniversary!</h1> : null}
</div>
);
}
当我非常困惑地展示这个“周年快乐！”时，当显示的数字为11时显示消息，我不知道为什么。
因为count仅第十一次点击是十。
您可以将增量函数更改为：
const increment = () => {
const newCount = count + 1
setCount(newCount);
setMilestone(newCount === 10);
};
或者可以setMilestone在内使用React.useEffect，例如：
React.useEffect(() => {
setMilestone(count === 10);
}, [count])
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句