如何从本地存储中删除一个多维数组的按钮点击?

Question

在我的表中，当输入一个值时，它作为一个2D数组存储到localstorage中，并映射到一个新的单独行的表中。创建新行时，它也有自己的删除按钮。当单击删除按钮时，带有该按钮的特定行将被删除。

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

由于表是基于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>
...
);