React组件文本不更新：点击递增按钮数值无变化

问题原因 #

你用var count = 0声明的是普通变量，React不会追踪普通变量的变化。点击按钮时虽然count的值确实会增加，但这个变化不会触发组件重新渲染，所以页面上显示的数值始终停留在初始的0。

解决方案 #

使用React的useState钩子来管理这个计数状态，useState是React专门用来追踪状态变化的工具，当状态更新时，React会自动重新渲染组件，更新页面内容。

修改后的代码：

import * as React from 'react';

const MyComponent = () => {
  // 使用useState声明状态变量和更新函数，初始值为0
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <h1>Hello World</h1>
      // 点击时调用setCount更新状态，用函数式更新避免闭包问题
      <button onClick={() => setCount(prevCount => prevCount + 1)}>{count}</button>
    </div>
  );
};

补充说明 #

• 组件每次重新渲染时，普通变量会被重新初始化，而useState会保留上一次渲染的状态值。
• 如果你不需要处理闭包问题，也可以直接写setCount(count + 1)，但函数式更新（prevCount => prevCount + 1）在异步更新或者依赖之前状态的场景下更可靠。

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