как проверить, установлен ли мой флажок или нет. Ad сохраните его в localStorage

#reactjs #typescript

Вопрос:

Я новичок в программировании, пока только младший. У меня есть список флажков. И когда я снимаю флажок, я хочу, чтобы флажок был сохранен в моем локальном хранилище. Вот мой сокращенный код, что я делаю не так? Не могу полностью понять, что я написал. Спасибо

 export default () => {
  const [isDefaultChecked, setDefaultChecked] = useState(true);
  const [isChecked, setChecked] = useState();
  const [isColumn, setColumn] = useState(true);
  const [hiddenColumns, setHiddenColumns] = useState([]);
  const [Checked, setIsChecked] = useState([]);
const onCheckboxChange = (key: string, value: boolean) => {
    const array = JSON.parse(localStorage.getItem("hiddenColumns"));
     // here im trying to check if value = to
    if (value) {
       const column = hiddenColumns.find((item) => item.value == key);
       const filtered = hiddenColumns.filter(
         (item) => item.key !== column.key
       )
       setHiddenColumns(filtered);
    
       if (!value) {
       setHiddenColumns([...hiddenColumns, { 'label': key } ]);
     }

    localStorage.setItem("hiddenColumns", JSON.stringify(key));
   }
  };
return(
          <div>
            <Checkbox
              defaultChecked={isDefaultChecked}
              label="Delivery Methods"
              onChange={(value) => onCheckboxChange("delieveryMethods", value)}
            />
          </div>
)

1. Похоже, вы считываете из localStorage массив скрытых значений столбцов (as array ) и никогда не ссылаетесь на него снова, затем проверяете value и выполняете некоторые действия, основываясь на его правдивости / ложности, а затем сохраняете в localStorage значение ключа "deliveryMethods" . Не совсем ясно, какую роль вы ожидаете, что localStorage будет играть здесь. Похоже, вам также не хватает закрытия } для первого if оператора, поэтому также неясно, какова для него условная область.

2. понял, спасибо за ваш комментарий 🙂

Ответ №1:

  if (!value) {
   setHiddenColumns([...hiddenColumns, { 'label': key } ]);
 }

localStorage.setItem("hiddenColumns", JSON.stringify(key));

Вы сохраняете один ключ в localStorage, чтобы соответствовать вашему коду, вы должны снова сохранить весь массив.

Теперь вы скрыли массив COLUMNS, который, по-видимому, представляет собой набор { label }, где label является ключом. Кроме того, в нем хранятся только скрытые значения. Итак, в вашем onCheckboxChange, если значение равно true, это означает, что вы должны добавить ключ флажка в массив, а если значение равно false, вы должны его удалить. Следующие коды достигают этого

 const onCheckboxChange = (key: string, value: boolean) => {
    if (value) setHiddenColumns(hiddenColumns => [...hiddenColumns, { label: key }]);
    else setHiddenColumns(hiddenColumns.filter(x => x.label !== key));
  };

после этого вы можете добавить перехват useEffect, который будет срабатывать при изменении массива hiddenColumns, который будет поддерживать синхронизацию вашего localStorage с массивом hiddenColumns

 React.useEffect(() => {
  localStorage.setItem("hiddenColumns", JSON.stringify(hiddenColumns));
}, [hiddenColumns]);