React中点击‘全部’按钮实现兄弟组件全量数据展示的方案咨询

我在页面中实现了数组过滤逻辑，点击不同按钮可筛选初始数组数据。现需实现点击过滤组件中的All按钮，向兄弟组件展示数组中的所有项，是否需要通过向父组件传递函数来实现？

父组件代码 #

const ShopPage = () => {
  const [data, setData] = useState(Categories);

  const filterResult = (catItem) => {
    if (!catItem) {
      console.log(Categories);
      setData(Categories);
    } else {
      const result = Categories.filter(
        (curData) => curData.category === catItem
      );
      setData(result);
    }
  };

  return (
    <>
      <div className={styles.wrapper}>
        <Filters filterResult={filterResult} />
        <Products products={data} />
      </div>
    </>
  );
};

export default ShopPage;

子组件代码 #

const Filters = ({ filterResult }) => {

  return (
    <>
      <div className={styles.filterbtns}>
        <div onClick={() => filterResult("Cap")} className={styles.filterbtn}>
          Cap
        </div>
        <div onClick={() => filterResult("Shirt")} className={styles.filterbtn}>
          Shirt
        </div>
        <div
          onClick={() => filterResult("Jogging")}
          className={styles.filterbtn}
        >
          Jogging
        </div>
        
        // 需要修改组件的useState数据，展示所有项
        <div onClick={() => filterResult()} className={styles.filterbtn}>
          All
        </div>
      </div>
    </>
  );
};

export default Filters;

是的，你当前的实现思路完全正确——必须通过向父组件传递函数来实现兄弟组件间的状态同步。

React遵循单向数据流原则，兄弟组件无法直接共享或修改彼此的状态，必须借助共同的父组件作为中间层传递状态更新逻辑。你的代码已经完美契合这个模式：

• 父组件ShopPage维护展示数据的核心状态data，并定义filterResult函数处理状态更新
• 子组件Filters通过props接收filterResult，点击All按钮时调用该函数（不传参数）
• 父组件的filterResult检测到无传入参数时，将data重置为原始Categories数组，让兄弟组件Products展示所有数据项

小优化建议 #

为让逻辑更清晰、避免空值潜在问题，可给All按钮的传参更明确：

1. 修改Filters组件中All按钮的点击事件：

<div onClick={() => filterResult('all')} className={styles.filterbtn}>
  All
</div>

2. 调整父组件的filterResult函数：

const filterResult = (catItem) => {
  if (catItem === 'all') {
    setData(Categories);
  } else {
    const result = Categories.filter(
      (curData) => curData.category === catItem
    );
    setData(result);
  }
};

这样代码可读性更强，逻辑意图更明确。

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