如何使用反应钩子将多个状态聚合为一个主状态？

Question

如果我没有正确表达问题，我深表歉意，让我解释一下。

我有一个可重用的过滤器组件，它根据预先确定的列表生成复选框或单选按钮。

例如，下面的列表将生成每个具有那么多复选框和标签的过滤器组件

const genre = ["Action", "Horror", "Comedy", "Drama"];
const contenttype = ["Series", "Movies", "Documentaries"];
const dategranularity = ["All Time", "Yearly", "Monthly", "Weekly"];

像这样

<Filter data={genre} label="Genre" checkboxgroup />
<Filter data={contenttype} label="Content Type" checkboxgroup />
<Filter data={dategranularity} label="Date Granularity" defaultValue="all time" />

这是我用于实现目标的过滤器组件功能（为简洁起见减少了）

const Filter = ({ data, label, checkboxgroup, defaultValue }) => {

  const [checkedState, setCheckedState] = useState([]);
  const [radios, setRadios] = useState([]);
  const [values, setValues] = useState([]);

  const handleList = (e) => {
    const updatedValuesState = values.includes(e.target.name)
      ? values.filter((label) => label !== e.target.name)
      : [...values, e.target.name];
    setValues(updatedValuesState);
    setActive(updatedValuesState.length === data.length);
  };
};

目前，我能够捕获和聚合仅在其自己的过滤器组件中选中的复选框因此，例如，如果我单击动作和恐怖，我会在控制台中得到values: ['action', 'horror']。那挺好的！但是，如果我单击下一个过滤器组件上的“系列”，则状态将完全重建，并且控制台会记录 values: ['series']。

我的最终目标是显示values: ['action', 'horror', 'series']，即使单选按钮值也可以聚合但只能聚合一次。相对于复选框可以是多个。

这是一个sandbox，你需要的所有东西都可以弄乱它。谢谢！！！

Answer 1

每个声明的过滤器组件都是它自己的实例。因此流派和内容类型过滤器组件不会相互感知。

但是，我们可以声明一个可以传递给所有过滤器组件的父状态，尽管它最终会污染公共过滤器组件。

我试过了，你可以看看here。