Как сохранить чекбоксы выбранными и подсчитанными после перехода на другую страницу с помощью функции select all - ReactJS

У меня есть приложение react, содержащее таблицу, которая заполняется записями из Django через rest-API. В приложении есть функция, которая может выбрать все чекбоксы каждой записи из таблицы, используя главный чекбокс в заголовке.

Я ищу, возможно ли сохранить флажки отмеченными и сохранить счетчик после перехода на другую страницу.

Вот фрагменты для selectAllHandler, selectOnHandler и счетчика selected, который подсчитывает количество выбранных флажков.

const selectAllHandler = (e) => {
    const toggleAll = e.target.checked;
    const updatedCheckBoxes = {};
    const newCheckBoxes = {};

    accounts.forEach((account) => {
      updatedCheckBoxes[`ch${account.id}-${account.compliant}`] = toggleAll;
    });
  
    setCheckBoxes(updatedCheckBoxes);

    for (let cbox in checkBoxes) {
      newCheckBoxes[cbox] = toggleAll;
    }
    setCheckBoxes(newCheckBoxes);
    setSelectAll(toggleAll)
  };

const selectOneHandler = (e) => {
    const target = e.target;
    const value = target.checked;
    const name = target.name;

    const newCheckBoxes = { ...checkBoxes, [name]: value };
    const toggleAll = Object.values(newCheckBoxes).every((chk) => chk);

    const someChecked = Object.values(newCheckBoxes).some((chk) => chk);

    setCheckBoxes(newCheckBoxes);
    setSelectAll(toggleAll || (someChecked && !value));
  };

  const selectedCount = Object.values(checkBoxes).filter(Boolean).length;

Вот как заполняются записи

const getAccount = async () => {
    
    const data = await axios
    .get("accounts/api/get-accounts/", {
      params: {
        page: pageParam,
        order: order,
        field: fieldOrder,
        search_field: searchField,
        search_value: searchValue,
        filter_type: getAccountType(),
        page_size: pageSize,
        compliant: compSel,
        privileged: classSel,
        enabled: enSel,
      },
    })
    .then((res) => {
      setAccounts(res.data.accounts);
      setCheckBoxes(res.data.accounts.reduce((acc, d) => ((acc["ch" + d.id + "-" + d.compliant] = false), acc), {}));
      setSelectAll(false);
      setPages(res.data.pages);
      setPage(res.data.page);
      setCount(res.data.count);
    }); 
    setLoading(true);
  }

Делимся также столом

Вернуться на верх