Удалить элементы из массива в локальном хранилище при изменении состояния

Question

В моем приложении реакции я храню массив в локальном хранилище. Когда я рефрагирую sh страницу (или go между страницами), локальное хранилище хранит массив так, как должен.

Однако я также хочу иметь возможность удалять элементы из массива (и это работает), но когда я обновляю sh страницу, элементы возвращаются в поле зрения, потому что я не удаляю их из локального место хранения.

Я попытался удалить массив из локального хранилища, затем добавить измененный массив обратно в хранилище, но он тоже не работает.

import React, { useEffect, useState } from 'react';
import ls from "local-storage";
function HomeIndex() {
  const [diePool, setDiePool] = useState([]);
  useEffect(() => {
    setDiePool(ls("diePoolArray") || []);
    setPoolCount(ls("poolCount") || 1);
  }, []);
  //WORKS**
  const addToPool = () => {
    ls("diePoolArray", [
        ...diePool,
        { 
        dp1 : poolCount,
        dp2 : diceType,
        dp3 : diceNumber,
        dp4 : diceAdjuster,
        dp5 : diceAlias,
        dp6 : poolStatus
        }
    ]);
    setDiePool(ls("diePoolArray"));
    var tempPoolCount = poolCount;
    tempPoolCount++;
    setPoolCount(tempPoolCount);
    ls("poolCount", tempPoolCount)
    clearState();
  };
  //DOESNT WORK**
  const handleRemoveItem = die => {
    setDiePool(diePool.filter(diePool => diePool.dp1 !== die.dp1));
    //Reset the local storage for the die pool
    ls.remove("diePoolArray");
    ls("diePoolArray", diePool);
    //setTestArray(ls("testArray"));
    //
  };

Answer 1

При handleRemoveItem обратите внимание, что вы не изменяете diePool, вместо этого вы создаете новый массив, используя filter, а затем вызываете setState для его изменения.

Проблема в том, что изменения вызова setState не применяются немедленно , поэтому ссылка на diePool не обязательно содержит новое значение, которое вы пытаетесь установить.

Что вы должны сделать, это сначала создать новый массив, а затем обновить состояние и локальное хранилище

let newArray = diePool.filter(diePool => diePool.dp1 !== die.dp1);
setState(newArray);
ls("diePoolArray", newArray);