ReactJS：状态仅在每秒钟单击一次时更新答案

【问题标题】：ReactJS: State only updates every second clickReactJS：状态仅在每秒钟单击一次时更新
【发布时间】：2021-11-08 18:37:47
【问题描述】：

我对 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++;
});

但这甚至会导致未定义。有人能帮我吗？为什么会发生这种情况以及如何解决？

【问题讨论】：

标签： reactjs state use-state

【解决方案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>

【讨论】：

好的，谢谢。来自 vue 的这种语法感觉非常直观，很高兴知道在 React 中这是不同的 :-)

【解决方案2】：

这不是反应问题。它与你增加的方式有关。尝试使用++counter，而不是counter++。我邀请您阅读this，以了解更多关于后缀增量和前缀增量之间的区别。

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

Unary Operators in JavaScript

【讨论】：

状态在 React 中不应该被改变。
@KonstantinModin 是的，你是对的，还有那个。感谢您指出这一点。