javascript - 如何使用 React Hook 将多个状态聚合为一个主状态？

Question

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

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

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

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" />

这是我为实现目标而使用的 Filter 组件函数(为简洁起见进行了缩减)

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);
  };
};

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

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

这是一个 sandbox有了你需要的一切来搞砸它。谢谢!!!

Answer 1

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

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

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