React中如何从子组件调用setState更新另一子组件并共享状态？

架构老林

2026-8-20

React子组件间状态同步与跨组件状态共享方案

核心解决思路：状态提升

在React中，子组件之间无法直接调用彼此的setState，标准解决方案是状态提升——将需要共享的状态迁移到这些子组件的共同父组件中，再通过props把状态值和状态更新方法传递给对应的子组件。这样任意子组件触发状态更新后，父组件的状态会变更，所有依赖该状态的子组件都会同步渲染，保持状态一致。

针对你的场景的具体实现

假设你需要新增一个组件（比如CountViewer）来同步显示Booking组件的count状态，我们将count状态提升到共同父组件中：

1. 共同父组件

import { useState } from 'react';
import Booking from './Booking';
import CountViewer from './CountViewer';

function App() {
  // 共享状态放在父组件
  const [count, setCount] = useState(1);

  return (
    <div className="app-container">
      {/* 向Booking传递状态和更新方法 */}
      <Booking count={count} setCount={setCount} />
      {/* 向CountViewer传递状态 */}
      <CountViewer count={count} />
    </div>
  );
}

export default App;

2. 修改后的Booking组件

function Booking({ count, setCount }) {
  // 示例：添加修改count的交互（比如点击按钮增加数量）
  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <>
      <h3>₦{3 * count}</h3>
      <button onClick={handleIncrement}>增加预订数量</button>
    </>
  );
}

export default Booking;

3. CountViewer组件（用于同步显示count）

function CountViewer({ count }) {
  return (
    <div className="count-display">
      <p>当前预订数量：{count}</p>
    </div>
  );
}

export default CountViewer;