使用 ++ 前缀更新时 React 状态变量会抛出错误

Question

我对 React 和 JS 还很陌生，只是探索语言的本质。

我正在尝试使用 ++ 运算符（以及通过计数器 + 1 的惯用方式）来比较更新状态变量“计数器”的差异。

我收到以下代码片段的错误是：

function App() {
  const [counter, setCounter] = useState(0);

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

  console.log(counter);

return (
    <>
  <button onClick={incrementCounter}>Increase </button>
    </>

App.jsx?t=1714542208954:31 Uncaught TypeError: Assignment to constant variable.
    at incrementCounter (App.jsx?t=1714542208954:31:18)
    at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=38cf15c3:3672:22)
    at Object.invokeGuardedCallbackDev (react-dom_client.js?v=38cf15c3:3697:24)
    at invokeGuardedCallback (react-dom_client.js?v=38cf15c3:3731:39)
    at invokeGuardedCallbackAndCatchFirstError (react-dom_client.js?v=38cf15c3:3734:33)
    at executeDispatch (react-dom_client.js?v=38cf15c3:7014:11)
    at processDispatchQueueItemsInOrder (react-dom_client.js?v=38cf15c3:7034:15)
    at processDispatchQueue (react-dom_client.js?v=38cf15c3:7043:13)
    at dispatchEventsForPlugins (react-dom_client.js?v=38cf15c3:7051:11)
    at react-dom_client.js?v=38cf15c3:7175:20

注：

I get the error after I click on Increase button

当我尝试使用

counter + 1

调用 setState 函数（ setCounter ）时，错误消失了，我无法理解原因。

我知道修复前/修复后运算符不适合更新反应状态，我想知道为什么会这样。

任何见解将不胜感激。

Answer 1

这是基本的Javascript，

counter

状态已声明为

const

，因此无法重新分配。

const [counter, setCounter] = useState(0); // <-- const

const incrementCounter = () => {
  setCounter(++counter); // <-- ++counter is a reassignment
};

考虑以下代码：

const foo = 0;
foo++; // error, can't be reassigned!

如果您需要在 React 中增加计数状态，惯用的方法是使用功能状态更新并将前一个状态值加一。

const [counter, setCounter] = useState(0);

const incrementCounter = () => {
  setCounter(counter => counter + 1);
};

使用

setCounter(counter + 1)

的工作原理类似，您不会重新分配或改变

counter

状态，而只是将

counter

状态更新为将 1 添加到其值的

结果

。