React中点击Refresh按钮用useState修改值为5的问题排查

React开发中需要实现如下交互：点击页面上的Refresh按钮后，通过useState将对应状态值修改为5。当前编写的代码存在运行问题，无法定位错误点，附问题代码截图：

这类需求的代码错误基本集中在以下几个点：

• 事件绑定写法错误：给按钮的onClick属性直接传入了状态更新的执行语句，没有用回调函数包裹，会导致组件渲染时就直接触发状态更新，不仅点击按钮无预期效果，还会触发无限重渲染报错
• Hooks调用违规：把useState的声明写在了条件判断、循环、嵌套普通函数内部，违反React Hooks只能在函数组件顶层调用的规则，导致状态更新失效
• 拼写错误：状态更新的setter函数名拼写错误，或者绑定的点击事件属性名写错（比如写成onclick全小写，React不会识别为事件绑定）

以下是符合React语法规范的可运行实现，适合简单逻辑的内联写法：

import { useState } from 'react';

function App() {
  // 声明状态，初始值可根据自身业务替换
  const [targetValue, setTargetValue] = useState(0);

  return (
    <div className="App">
      {/* 展示当前状态值，可根据业务替换对应展示逻辑 */}
      <p>当前状态：{targetValue}</p>
      {/* 点击事件用箭头函数包裹更新逻辑，点击时才会触发执行 */}
      <button onClick={() => setTargetValue(5)}>
        Refresh
      </button>
    </div>
  );
}

export default App;

如果按钮点击逻辑比较复杂，也可以把更新逻辑抽离为单独的处理函数，写法如下：

import { useState } from 'react';

function App() {
  const [targetValue, setTargetValue] = useState(0);

  // 单独声明点击处理函数
  const handleRefresh = () => {
    // 这里可以加其他刷新相关的业务逻辑，比如接口请求、重置其他状态等
    setTargetValue(5);
  };

  return (
    <div className="App">
      <p>当前状态：{targetValue}</p>
      {/* 直接传入函数引用即可，不要加括号执行 */}
      <button onClick={handleRefresh}>
        Refresh
      </button>
    </div>
  );
}

export default App;

关键注意点：给onClick传参时如果直接写setTargetValue(5)，相当于把函数执行的返回值传给事件属性，组件渲染到这行就会立刻执行状态更新，触发重渲染后又会再次执行更新，最终陷入无限重渲染死循环，这是这类需求最容易踩的坑。

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