React点击速度测试：计数器值变更但页面未更新问题排查求助

你问题的核心是没有用React的状态变量管理计数器，而是用了普通的JS变量。React只有在组件的state或props发生变化时，才会重新渲染组件更新UI，普通变量的修改不会触发这个机制——虽然控制台能打印出更新后的值，但React完全不知道这个变量变了，自然不会更新页面上的H2标签。

直接给你修正后的代码，关键改动我标出来了：

import React, { useState } from 'react';
import './app.css';

function App() {
  // 用useState声明状态变量，替代原来的普通变量
  const [contador, setContador] = useState(0);

  // 把点击事件函数放到组件内部，这样能访问到状态更新函数setContador
  function hasClicked() {
    // 使用状态更新函数修改值，React会感知到变化并重新渲染UI
    setContador(prevContador => prevContador + 1);
    console.log(contador); // 这里注意：console.log的是更新前的值，因为状态更新是异步的
  }

  return (
    <div className="App">
      <h1>Click Speed Test</h1>
      <h2>{contador}</h2>
      <button onClick={hasClicked}>Click on Me</button>
    </div>
  );
}

export default App;

几个关键说明： #

• const [contador, setContador] = useState(0)：这是React的状态声明语法，contador是当前的计数器值，setContador是专门用来更新这个状态的函数，调用它才会让React知道状态变了。
• 点击事件函数必须定义在组件内部，不然访问不到setContador。
• 用setContador(prev => prev + 1)这种函数式更新更稳妥，尤其是当你的更新依赖于之前的状态值时，能避免异步更新带来的问题。

这样修改后，点击按钮时H2标签的数字就会实时同步更新了。

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