React如何仅用useState实现侧边栏动态更新（无需Redux）

小体量应用完全不需要引入Redux，仅靠React自带的Hook就能实现选中人物信息的跨组件同步，以下是可直接落地的实现方案：

方案1：状态提升（优先推荐，零额外依赖，实现最简单） #

核心逻辑是把「当前选中人物」的状态，从TinderCards组件挪到TinderCards和RightSidebar共同的最近父组件（一般是App根组件）维护，父组件把状态更新方法传给卡片组件、把选中的人物数据传给侧边栏组件即可，没有额外学习成本。

具体实现步骤 #

1. 首先修改共同父组件（以App.jsx为例），维护选中人物状态：

function App() {
  // 存储当前选中的人物完整信息，默认值设为null即可
  const [selectedPerson, setSelectedPerson] = useState(null);

  return (
    <div className="app-container">
      {/* 把状态更新方法传给卡片组件，供点击卡片时触发 */}
      <TinderCards onSelect={setSelectedPerson} />
      {/* 把选中的人物数据传给侧边栏组件，供渲染详情使用 */}
      <RightSidebar personInfo={selectedPerson} />
    </div>
  )
}

2. 修改TinderCards组件，接收父组件传入的选中回调，点击卡片时传递完整人物对象：

function TinderCards({ onSelect }) {
  const [people, setPeople] = useState([
    {
      name: "Model Baby",
      url:"https://www.themodelskit.co.uk/wp-content/uploads/2021/10/shutterstock_1431963185.jpg",
      age:22
    },
    {
      name: "Seema Jaswal",
      url:"https://static.standard.co.uk/2021/06/14/16/euro_2020_live_seema_jaswal_01-1.jpg?width=968&auto=webp&quality=50&crop=968%3A645%2Csmart",
      age:32
    },
    {
      name: 'Baby',
      url: '../assets/IMG_20210811_105110_849.webp',
      age: 34
    }
  ]);

  useEffect(() => {
    const allPeople = query(collection(db, "people"))
    // 保留监听取消方法，用于组件卸载时清理
    const unsubscribe = onSnapshot(allPeople, (snapshot) => (
      setPeople(snapshot.docs.map((doc) => doc.data()))
    ))
    // 替换原来的占位second，避免内存泄漏
    return () => unsubscribe()
  }, [])

  return (
    <div>
      <div className='tinderCards__cardContainer'>
        {people.map((person) => (
          <TinderCard 
            className="swipe" 
            key={person.name} 
            // 修正原代码的数组写法错误，两个方向要分开作为数组项
            preventSwipe={["up", "down"]} 
            onClick={() => {
              // 传递完整人物对象，不要只传name，减少侧边栏的匹配逻辑
              onSelect(person)
            }} 
          >
            <div className='card' style={{ backgroundImage: `url(${person.url})`}}>
              <h3>{person.name}</h3>
            </div>
          </TinderCard>
        ))}
      </div>
    </div>
  )
}

export default TinderCards

3. 修改RightSidebar组件，接收传入的人物信息，加空值兜底即可动态渲染：

function RightSidebar({ personInfo }) {
  return (
    <div className='rightSidebar'>
      <div className='rightSidebar__contents'>
        <h1>About</h1>
        <Card className='rightSidebar__card'>
          <div className='card__nameContents'>
            {personInfo ? (
              <>
                <CardHeader 
                  className='card__nameAge' 
                  title = {personInfo.name} 
                  subheader = {personInfo.age}
                  avatar = {<VerifiedIcon className='activeIcon verified' />}  
                />
                <CardHeader 
                  className='card__active' 
                  title = "active" 
                  avatar={<FiberManualRecordIcon className='activeIcon' />} 
                />
              </>
            ) : (
              <p>点击卡片查看人物详情</p>
            )}
          </div>
        </Card>
      </div>
    </div>
  )
}

方案2：Context跨层传递（适合组件嵌套深的场景） #

如果你的组件嵌套层级超过3层，一层层传props太繁琐，可以直接用React自带的useContext Hook实现跨层状态共享，不需要安装任何第三方依赖，体量比Redux小很多，完全能满足小型应用的状态共享需求：

• 第一步：创建全局的人物选中Context
• 第二步：在根组件用Context.Provider包裹应用，传入选中状态和更新方法
• 第三步：在TinderCards、RightSidebar组件里直接用useContext获取状态和更新方法，不需要逐层传props

现有代码的问题修正提示 #

• 原代码中preventSwipe={["up, down"]}写法错误，会导致上下滑动阻止失效，要拆成两个独立的数组项["up", "down"]
• useEffect的清理函数不要留占位内容，要返回onSnapshot生成的unsubscribe方法，组件卸载时取消数据库监听，避免内存泄漏
• 卡片点击时不要只传递person.name字段，直接传完整person对象，省去侧边栏遍历people列表匹配字段的额外开销

内容的提问来源于stack exchange，提问作者Swizz 6ix