如何修复React中点击按钮两次才更新计数状态的问题？

Hey there, I see exactly what's causing that weird double-click behavior with your count component. Let's break it down and fix it:

The Root Cause #

Your issue comes from using count++ inside setCount(). Here's why that's problematic:

• count++ is a post-increment operator — it returns the current value of count first, then increments the variable. So on your first click, setCount(count++) actually passes 0 (the original state value) to setCount, and then increments the local count variable (not the React-managed state). Since you're modifying the local variable instead of updating the state properly, the component doesn't re-render, so you don't see any change.
• On the second click, the local count variable is now 1, so setCount(count++) passes 1 to setCount, which finally updates the React state. The component re-renders, showing you 1 — but the local variable gets incremented again to 2, which doesn't affect the state.

Fix 1: Directly Calculate the New State #

The simplest fix is to avoid modifying the count variable directly, and instead pass the new calculated value to setCount:

import React, { useState } from "react";
const Count = () => {
  let [count, setCount] = useState(0);
  function click() {
    console.log("clicked");
    // Just pass count + 1 instead of modifying the variable
    setCount(count + 1);
  }
  return (
    <div>
      <button onClick={click} className="btn btn-primary">
        Click here
      </button>
      <h3>{count}</h3>
    </div>
  );
};
export default Count;

Fix 2: Functional Update (Recommended) #

For scenarios where you're updating state based on the current state (like increments), React recommends using the functional update pattern. This ensures you always get the latest state value, even if updates are asynchronous:

import React, { useState } from "react";
const Count = () => {
  let [count, setCount] = useState(0);
  function click() {
    console.log("clicked");
    // prevCount is the most up-to-date state value
    setCount(prevCount => prevCount + 1);
  }
  return (
    <div>
      <button onClick={click} className="btn btn-primary">
        Click here
      </button>
      <h3>{count}</h3>
    </div>
  );
};
export default Count;

This approach is especially useful if you ever need to trigger multiple state updates in a row — it prevents bugs caused by stale state values.

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