使用const声明useState状态变量点击后报错且状态不更新的原因？

你的代码示例： #

import { useState } from 'react';

function App() {

  let count =0;
  const [counter, setCounter] = useState(0);
  
  const Incrementalcount=()=>{
    ++count;
    console.log(count);
    setCounter(++counter);
  }

  return (
   
    <div className="App">
      <header className="App-header">
       State counter without is {count}

       <br></br>
       State counter is {counter} 
       <br></br>

       <button onClick={Incrementalcount}> Counter </button>
      </header>
    </div>
  );
}

export default App;

问题原因拆解： #

1. const声明的counter状态更新报错且页面不更新

• counter是useState返回的状态变量，用const声明意味着它是不可直接修改的常量。你在setCounter(++counter)里用了++counter，这会尝试直接修改counter的内存值，违反了const的定义，所以开发者工具会抛出错误，状态更新自然失效。
• 正确的状态更新方式应该是基于当前状态生成新值，推荐用函数式更新（避免闭包导致的旧值问题）：

  // 函数式更新，确保拿到最新的状态值
  setCounter(prevCounter => prevCounter + 1);
  

2. let声明的count控制台有变化但页面不更新

• let count = 0是普通的JavaScript变量，React不会监听普通变量的变化来触发组件重渲染。组件只有在状态（useState/useReducer）、props或者context发生变化时，才会重新执行渲染逻辑。
• 你修改count后，虽然控制台能打印出新值，但组件没有重新渲染，页面上的count自然不会同步更新。如果需要页面响应这个变量的变化，应该把它改成useState的状态变量。

内容的提问来源于stack exchange，提问作者Nazir Rizwan