单击按钮时如何从本地存储中删除多维数组？

Question

在我的 table 上，当输入一个值时，它会作为二维数组存储到本地存储，并映射到新的单独行上的 table。创建新行时，它也有自己的删除按钮。单击该删除按钮时，将删除带有该按钮的特定行。

一个例子是[['hello', 'hi', 'hey'], ['bye', 'goodbye', 'cya']]；第一个嵌套数组会将它包含的 3 个数据映射到一行，第二个嵌套数组将映射到下一行。如果我想删除第一行，我会单击删除按钮，这将导致第一个嵌套数组被删除，从而导致第一行被删除。

由于 table 基于 localstorage，我需要删除该特定数组但保留其他数组。我想我可以通过获取嵌套数组索引并将其删除来实现这一点。现在我不确定我是否需要使用 .splice() 或其他方法？。这是我用过但没有用的方法：

const getData = [JSON.parse(localStorage.getItem('pls'))];

const tableDatas = [...getData];

 const handleSingleDelete = (index) => {
   //what do I place here? I tried this:
   getItem.splice(index, 1)
}
...
return(
    <Table className="tablesorter" responsive id="maintb">

    <tbody id="tbid">
                    {(tableDatas.map((l,i) => (
                      <tr key={`${l+i}`} id={`${i}`}>
                          <td>{tableDatas[i][1]}</td>
                          <td>{tableDatas[i][2]}</td>
                          <td>{tableDatas[i][3]}</td>
                          <td>
                          <Button onClick={handleSingleDelete}>Delete
                          </Button>
                          </td>
                       </tr>
             </tbody>
    <Table>
)

Answer 1

每次你想对它进行更改时，你应该从 localStorage 中获取数组，因为你总是需要最新的数据，首先调用它总是有相同的数组和任何未来的更改在您再次调用它之前，不会在变量中更新到本地存储。

先把它带入函数，然后去掉你要的索引再解析保存到localstorage:

编辑：为了呈现数据，可以使用useState，并在每次删除时更新它。

const localStorageName = "pls";
const [arrData, setArrData] = useState(JSON.parse(localStorage.getItem(localStorageName)))

const handleSingleDelete = (index) => {
        const currentArray = JSON.parse(localStorage.getItem(localStorageName));
        currentArray.splice(index, 1);
        localStorage.setItem(localStorageName, JSON.stringify(currentArray))
        setArrData(() => currentArray)
    }

现在使用此 arrData 在组件中循环并始终呈现最新数据。

Answer 2

感谢 woohaik 和一些修改，我通过这样做得到了结果：

    const localStorageName = 'pls';
    const [arrData, setArrData] = useState(JSON.parse(localStorage.getItem(localStorageName)))

    function handleSingleDelete(e,i){
      //gets array from localstorage
      //Splices it via index of specific row
      //sets modified array as new array and deletes it from rendered view.
      const currentArray = JSON.parse(localStorage.getItem(localStorageName));
      currentArray.splice(i, 1);
      localStorage.setItem(localStorageName, JSON.stringify(currentArray))
      setArrData(() => currentArray)
    }
...
return(
                    {(tableDatas.map((l,i) => (
                      <tr key={`${l+i}`} id={`${i}`}>
                          {/*<td>{i}</td>*/}
                          <td>{tableDatas[i][2]}</td>
                          <td>{tableDatas[i][0]}</td>
                          <td>{tableDatas[i][3]}</td>
                          <td>{tableDatas[i][1]}</td>
                          <td>Idle</td>
                          <td>
                          <Button onClick={e => handleSingleDelete(e, i)}>Delete
                          </Button>
                          </td>
                      </tr>
...
);

单击按钮时如何从本地存储中删除多维数组？

How do you delete a multidimentional array from localstorage on button click?

javascript

reactjs

reactstrap