React中如何将Filter子组件的useState值传递给同级Card子组件？

你当前的组件层级里，Filter和Card的最近共同父组件是Home，最简便无额外依赖的实现方式是状态提升，不需要引入第三方状态库。

实现逻辑 #

把原本Filter组件内部维护的、需要共享给Card的useState状态，上移到Home组件中维护：

• Home负责持有共享状态、修改状态的方法
• 把状态修改方法通过props传给Filter，Filter触发筛选逻辑时调用该方法，更新Home上的共享状态
• 把共享状态本身通过props传给Card，Card就能实时拿到Filter更新后的值，状态变化时会自动触发重渲染

代码示例 #

1. 改造Home组件（共同父级） #

import { useState } from 'react';
import Filter from './Filter';
import Card from './Card';

const Home = () => {
  // 原Filter组件中需要对外传递的状态，提升到这里维护，初始值和你之前在Filter里定义的保持一致即可
  const [filterCondition, setFilterCondition] = useState('');

  return (
    <div>
      {/* 向Filter传递状态更新函数，允许它修改共享状态 */}
      <Filter updateFilter={setFilterCondition} />
      {/* 向Card传递共享状态值，供它读取使用 */}
      <Card filterData={filterCondition} />
    </div>
  );
};

export default Home;

2. 改造Filter组件（数据发送方） #

删除原本内部维护的对应useState状态，接收父组件传的更新方法，筛选值变化时调用该方法上报数据：

const Filter = ({ updateFilter }) => {
  // 筛选操作触发时，调用父组件传的方法把新值传出去
  const handleFilterAction = (newFilterValue) => {
    updateFilter(newFilterValue);
  };

  return (
    <div className="filter-area">
      {/* 你原本的筛选交互逻辑，比如下拉选择、关键词输入、时间选择等，值变化时触发handleFilterAction即可 */}
    </div>
  );
};

export default Filter;

3. 改造Card组件（数据接收方） #

直接通过props接收共享状态即可使用，状态更新时组件会自动刷新：

const Card = ({ filterData }) => {
  // 在这里直接使用filterData做卡片列表的过滤、渲染逻辑即可
  return (
    <div className="card-list">
      {/* 业务渲染逻辑 */}
    </div>
  );
};

export default Card;

注意事项 #

• 要共享的状态只保留一份数据源（即存在Home组件中），不要在Filter里再重复定义同名状态，否则会出现数据不同步问题
• 如果后续项目组件层级变深、props多层传递太繁琐，可以再考虑使用Context API或者轻量状态库实现跨层传值，当前这个层级用状态提升是性能最好、代码最简洁的方案

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