Блог

У меня есть крюк для сохранения состояния в локальном хранилище:

   const [expandingState, setExpandingState] = useLocalStorageState<Record<string, boolean>>(
    'expandingState',
    {},
  );
 

и после того, как пользователь нажимает на элемент развернуть/свернуть, я управляю значением состояния, используя setExpandingState, как это:

   const handleExpandCollapse = (row: UseTableRowProps<TableTreeProps>): void => {
    setExpandingState(prevState => {
      if (!prevState[row.id]) {
        return {
          ...prevState,
          [row.id]: true,
        };
      } else {
        const newState = { ...prevState };

        delete newState[row.id];

        return newState;
      }
    });
  };
 

Подробнее о конкретном API react-таблицы: https://react-table.tanstack.com/docs/api/useExpanded

Я использую row.id для привязки выбранного поля и расширения значений состояния, но при таком подходе, если мы добавим или удалим еще один элемент в таблицу, то row.id каждой строки таблицы смещается, и мы имеем неправильные значения в состоянии и, как следствие, неправильно отображаем развернутые и свернутые элементы таблицы…