Pre or Post 使用 ++ 增加 React 状态抛出只读错误

Question

import React, {useState} from 'react';

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

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

  return(
      <div>
          <h1>{counter}</h1>
          <button onClick={onIncrement}>Increment</button>
      </div>
  )
}

export default App;

在上面的代码片段中，增量按钮 (++counter) 的 onClick 抛出 Uncaught TypeError: "counter" is read-only

然而，如果我将其更改为 counter+1，则效果很好。我知道 counter+1 和 ++counter 在输出方面是相同的，但从技术上讲，它们在内部是不同的。它们有何不同？我看到一个博客，其中一位 C 程序员解释了 ++ 运算符使用寄存器并引用相同的地址位置，这与其他数学运算不同。为什么这种增量尝试在 React 中被捕获为错误？

Answer 1

++ Operator 试图改变变量本身，并且在理论层面上计数器是只读的 React 状态自然应该抛出错误。奇怪的是，通过对您的状态使用“let”初始化程序可以避免此错误；因此，通过尝试更改常量的值会遇到错误。虽然遵循功能操作（没有副作用），但应该以更安全的方式进行更改。一种简单的方法可能是：

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

Answer 2

在 ReactJS 中，count 变量是不可变的，只读的，当您使用 ++ 增量时，您试图直接更改 count 变量

当你使用setCounter()函数传递count+1时，你传递的是一个值，并没有改变变量的原始值。在幕后，setCounter 使用此更新值复制计数，保持不变性

Answer 3

++counter

相当于：

counter = counter + 1;

所以：

setCounter(++counter)

大致相当于：

setCounter(counter = counter + 1)

但由于计数器是 const，您会得到：Uncaught TypeError: "counter" is read-only

Pre or Post 使用 ++ 增加 React 状态抛出只读错误

Pre or Post Incrementing React state with ++ throws read only error

javascript

operators

reactjs

react-hooks