Javascript 在React上使用多个复选框和挂钩

我有一个多复选框模式，过滤列表以显示用户，因此当我单击其中一个复选框并提交它时，列表将被过滤以仅显示与所选状态匹配的结果；这很好，但由于某种原因，当我过滤并返回模式选择另一个选项时，我没有选择上一个选项（我应该选择），而且我需要取消选中每个选项，以便再次显示原始列表（无任何过滤）

这是我的结果数组：

messages=[
{id:1, description:'abc', status:'SENT'},
{id:2, description:'hello', status:'CANCELLED'},
{id:1, description:'bye', status:'SENT'}];

这是我的状态数组：

const states = [
    {
      id: 1,
      label: "SENT",
      class: "checkbox",
    },
    { id: 2, label: "CANCELLED", class: "checkbox" },
    { id: 3, label: "EMITING", class: "checkbox" },
    {
      id: 4,
      label: "NULLED",
      class: "checkbox",
    },
    
  ];

这是我的复选框组件：

const filterOptions = states.map((option) => (
    <div key={option.label} className="mb-3">
      <Form.Check
        type={option.class}
        id={option.id}
        name={option.label}
        label={option.label}
        onChange={filterState}
      />
    </div>
  ));

items数组现在只有选中复选框的标签，因此我可以使用它在提交时过滤结果：

const onSubmit = () => {
    event.preventDefault();
    event.stopPropagation();
    let search = filterMessagesByStatus(items);
    if (search.length > 0) {
      setData(search);
      setIsActive(true);
      setEmptySearch(false);
    } else {
      setIsActive(false);
      setEmptySearch(true);
    }

    setModalShowFilters(false);
  };

现在我不知道为什么不保存我以前选择的复选框，而且我也不知道将列表返回到原始状态的最佳方式是什么（不进行过滤，取消选中所有内容）

---

有人能帮我解决这个问题吗？

这就是我为解决这个问题所做的：

我在复选框中添加了此字段：

checked={option.checked}

我添加了一个新的钩子来控制每个复选框的检查状态，如下所示：

const [state, setState] = useState({
    "0": false,
    "1": false,
    "2": false,
    "3": false,
    "4": false,
    "5": false,
    "6": false,
  });

在“我的邮件”数组中添加此字段：

checked: state[0],

然后我稍微更改了一下过滤功能，添加了以下内容：

setState((s) => ({ ...s, [id]: !s[id] }));

所以我知道每次单击复选框时都会更新所有复选框的状态

setState((s) => ({ ...s, [id]: !s[id] }));