Question

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

Answer 1

在handleRemoveItem，请注意，您没有修改diePool，而是使用filter创建了一个新数组，然后调用setState对其进行了修改。

问题在于， setState调用的更改不会立即应用，因此diePool的引用不一定包含您要设置的新值。

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


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

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

1 个答案: