ReactJS:状态只更新每秒钟点击

Question

我是React的新手，有以下简单的组件:

import { useState } from "react";
const Counter = () => {
let [counter, setCounter] = useState(0);
const countUp = () => {
console.log(counter);
setCounter(counter++);
};
return (
<div>
<p>{counter}</p>
<button onClick={countUp}>Add</button>
</div>
);
};
export default Counter;

我用0初始化状态，并希望在每次点击按钮时计数。这是有效的，但只有当我点击两次。第一次点击不影响号码

我想我可以这样解决它:

setCounter((counter) => {
counter++;
});

但这甚至会导致undefined。有人能帮帮我吗?为什么会发生这种情况?如何解决?

Answer 1

你应该避免在React中改变状态。因为这是不好的做法。这样写:

const Counter = () => {
let [counter, setCounter] = React.useState(0);
const countUp = () => {
console.log(counter);
setCounter(counter + 1);
};
return (
<div>
<p>{counter}</p>
<button onClick={countUp}>Add</button>
</div>
);
};
// export default Counter;
ReactDOM.render(<Counter />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

这不是一个反应问题。它与你增加的方式有关。用++counter代替counter++。我邀请您阅读本文，以了解更多关于后缀自增和前缀自增的区别。

正如@Konstantin正确指出的，还有另一个问题，你不应该直接改变状态。但至少它应该回答你的问题，为什么每两秒钟点击一次。

JavaScript中的一元操作符