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

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

Answer 1

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

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

Unary Operators in JavaScript

Answer 2

你应该避免在 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>

ReactJS：状态仅在每秒点击一次时更新

ReactJS: State only updates every second click

state

reactjs

use-state