使用 ++ 的 Pre 或 Post 增量 React 状态会引发只读错误

IT技术 javascript reactjs react-hooks operators
2021-05-02 06:42:45 
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;

在上面的代码片段中，onClick of Increment button (++counter) 抛出Uncaught TypeError: "counter" is read-only

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

3个回答

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

当您通过传递 count + 1 来使用 setCounter() 函数时，您正在传递一个值，而不会更改变量的原始值。在幕后，setCounter 使用此更新值制作计数的副本，保持不变性

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

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

++counter

相当于：

counter = counter + 1;

所以：

setCounter(++counter)

大致相当于：

setCounter(counter = counter + 1)

但由于计数器是const你得到的：未捕获的类型错误：“计数器”是只读的

其它你可能感兴趣的问题
上一篇在 reactjs 中实现单点登录（saml2），无需 express 下一篇Nodemon 不工作：[nodemon] 由于更改而重新启动