如何点击按钮删除localStorage中二维数组对应的指定表格行数据

核心问题说明 #

你的代码存在4个导致功能失效的错误：

• 读取localStorage时额外嵌套了一层数组：你存储的本身就是[['a','b'], ['c','d']]格式的二维数组，JSON.parse(localStorage.getItem('pls'))返回的已经是二维数组，再套一层[]会变成三维数组，后续操作全部错位
• 删除函数里操作的变量名错误：你定义的变量是getData/tableDatas，但调用splice用了不存在的getItem变量
• 没有把修改后的数据回写到localStorage，也没有触发视图更新：React环境下需要用状态托管表格数据，直接修改普通变量不会触发页面重新渲染
• 删除按钮没有传递当前行索引：直接绑定onClick={handleSingleDelete}拿到的是事件对象，不是行索引

修正后完整代码（React函数组件） #

import { useState } from 'react'

// 组件内部逻辑
const YourTableComponent = () => {
  // 初始化时从localStorage读数据，兜底为空数组
  const [tableDatas, setTableDatas] = useState(() => {
    const localData = localStorage.getItem('pls')
    return localData ? JSON.parse(localData) : []
  })

  const handleSingleDelete = (index) => {
    // 拷贝原数组避免直接修改状态
    const newTableDatas = [...tableDatas]
    // 删除指定索引的行
    newTableDatas.splice(index, 1)
    // 更新状态触发视图刷新
    setTableDatas(newTableDatas)
    // 把修改后的数据写回localStorage持久化存储
    localStorage.setItem('pls', JSON.stringify(newTableDatas))
  }

  // 渲染部分
  return(
    <Table className="tablesorter" responsive id="maintb">
      <tbody id="tbid">
        {tableDatas.map((l,i) => (
          <tr key={`${l+i}`} id={`${i}`}>
            {/* 注意：数组索引默认从0开始，如果你确实不需要子数组第一个元素，可以改回[1][2][3] */}
            <td>{l[0]}</td>
            <td>{l[1]}</td>
            <td>{l[2]}</td>
            <td>
              <Button onClick={() => handleSingleDelete(i)}>Delete</Button>
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  )
}

内容的提问来源于stack exchange，提问作者noobcode0000