Reactjs 更改状态时从本地存储中的阵列中删除项_Reactjs_Local Storage

Reactjs 更改状态时从本地存储中的阵列中删除项

reactjs

Reactjs 更改状态时从本地存储中的阵列中删除项,reactjs,local-storage,Reactjs,Local Storage,在我的react应用程序中，我正在本地存储中存储一个阵列。当我刷新页面（或在页面之间切换）时，本地存储会保持阵列正常运行但是，我也希望能够从阵列中删除项目（它可以正常工作），但是当我刷新页面时，这些项目会重新显示出来，因为我没有从本地存储中删除它们我尝试从本地存储中删除阵列，然后将修改后的阵列重新添加到存储中，但也不起作用 import React, { useEffect, useState } from 'react'; import ls from "local-storage"; f

在我的react应用程序中，我正在本地存储中存储一个阵列。当我刷新页面（或在页面之间切换）时，本地存储会保持阵列正常运行

但是，我也希望能够从阵列中删除项目（它可以正常工作），但是当我刷新页面时，这些项目会重新显示出来，因为我没有从本地存储中删除它们

我尝试从本地存储中删除阵列，然后将修改后的阵列重新添加到存储中，但也不起作用

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"));
    //
  };

在

handleremovietem

请注意，您并没有修改

diePool

，而是使用

filter

创建一个新数组，然后调用

setState

对其进行修改

问题是，setState调用的更改不会立即应用，因此

diePool

的引用不一定包含您试图设置的新值

您应该首先创建一个新阵列，然后更新状态和本地存储


让newArray=diePool.filter（diePool=>diePool.dp1！==die.dp1）；
设置状态（新数组）；
ls（“diePoolArray”，newArray）；

在

handleremovietem

注意，您并没有修改

diePool