React实现点击按钮更新计数器：setCount无法更新值求助

云原生阿岚

2026-7-11

React useState计数器更新问题解决方法

你直接修改count变量（count=count+1）的方式是错误的，React的useState状态是不可变的，必须通过setCount函数来更新状态，否则不会触发组件重新渲染，还可能导致状态异常。

两种正确的更新方式：

直接传入新状态值：适用于状态更新不依赖之前状态的场景

function add() {
  setCount(count + 1);
}

函数式更新：当状态更新依赖于上一次的状态时，推荐用这种方式，避免异步更新导致的状态滞后问题

function add() {
  setCount(prevCount => prevCount + 1);
}

完整修正后的代码：

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  function add() {
    // 函数式更新更可靠，尤其在连续点击等场景下
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={add}>+</button>
    </div>
  );
}

export default App;