React状态提升同步子父组件状态：无需useEffect的实现建议咨询

核心原因 #

你遇到的count比step小1的问题，本质是React setState的异步性：当你在子组件里先更新本地step状态，再调用父组件的回调传递step值时，此时获取到的step还是更新前的旧值，导致父组件的count始终慢一步。

无需useEffect的纯状态提升方案 #

方案1：完全提升状态到父组件（推荐） #

把step的状态完全放在App组件中，Step组件只做UI渲染和触发更新逻辑，不再维护本地state。这样所有组件共享同一个数据源，自然不会有同步问题：

// App组件
function App() {
  const [count, setCount] = useState(1);

  const handleStepChange = (newStep) => {
    setCount(newStep);
  };

  return (
    <div>
      <Step currentStep={count} onStepChange={handleStepChange} />
      {/* 其他需要count的子组件 */}
      <OtherComponent step={count} />
    </div>
  );
}

// Step组件
function Step({ currentStep, onStepChange }) {
  const nextStep = () => {
    onStepChange(currentStep + 1);
  };

  const prevStep = () => {
    if (currentStep > 1) {
      onStepChange(currentStep - 1);
    }
  };

  return (
    <div>
      <button onClick={prevStep}>上一步</button>
      <span>当前步骤：{currentStep}</span>
      <button onClick={nextStep}>下一步</button>
    </div>
  );
}

方案2：保留子组件本地state，但同步传递最新值 #

如果因为某些原因需要保留Step组件的本地state，那么在更新state时，要直接把计算后的最新值传给父组件，而不是依赖更新后的本地state（因为setState是异步的，更新后立即读取state还是旧值）：

// App组件
function App() {
  const [count, setCount] = useState(1);

  const handleStepChange = (newStep) => {
    setCount(newStep);
  };

  return (
    <div>
      <Step onStepChange={handleStepChange} />
      <OtherComponent step={count} />
    </div>
  );
}

// Step组件
function Step({ onStepChange }) {
  const [step, setStep] = useState(1);

  const nextStep = () => {
    const newStep = step + 1;
    setStep(newStep);
    // 直接传递计算后的新值，而不是step（此时step还是旧值）
    onStepChange(newStep);
  };

  const prevStep = () => {
    if (step > 1) {
      const newStep = step - 1;
      setStep(newStep);
      onStepChange(newStep);
    }
  };

  return (
    <div>
      <button onClick={prevStep}>上一步</button>
      <span>当前步骤：{step}</span>
      <button onClick={nextStep}>下一步</button>
    </div>
  );
}

为什么之前的useEffect能解决问题？ #

因为useEffect会在组件状态更新（step变化）后执行，此时读取的step已经是更新后的最新值，所以传递给父组件的count能同步。但这种方式属于“事后补救”，不如直接通过状态提升的正确写法从根源避免同步问题。

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