React应用Local Storage存储数据仅存于数组0号索引，表格展示异常如何解决

问题根因 #

你现有代码的核心问题出在3处：

1. 拆分HTML后额外套了一层数组：const myArr = [transaction.split("</tr>")] 这行把split返回的行数组又包了一层，导致所有行数据都挤在myArr[0]索引下，没有直接作为数组的独立元素。
2. localStorage只能存储字符串，你直接把数组存入时，会被自动转为逗号拼接的普通字符串，读取后拆分格式就会错乱。
3. 渲染历史表格时索引写错：row.innerHTML = hisArr[i][0] 实际应该取hisArr[0][i]，但这是治标不治本的写法。

快速修复（不改现有DOM操作逻辑） #

直接替换RecentTrans和historyVal两个方法的代码即可：

const RecentTrans = () => {
  setHistory("block");
  const transDom = document.getElementById('table');
  if (transDom.innerHTML.trim() === "") return;
  const recentTransDom = document.getElementById('recenttrans');
  // 拆分后过滤空行，不要额外套数组
  const transRows = transDom.innerHTML.split("</tr>").filter(row => row.trim() !== '');
  // 清空原有内容避免重复渲染
  recentTransDom.innerHTML = '';
  transRows.forEach((rowHtml, idx) => {
    const row = recentTransDom.insertRow(idx);
    // 补回split去掉的闭合标签
    row.innerHTML = rowHtml + '</tr>';
  })
  // 序列化后存入localStorage
  localStorage.setItem("valhistory", JSON.stringify(transRows));
}

const historyVal = () => {
  setStatus("block");
  const historyDom = document.getElementById('historyVal');
  const rawHistory = localStorage.getItem("valhistory");
  if (!rawHistory) return;
  // 反序列化拿到正常的行数组
  const transRows = JSON.parse(rawHistory);
  historyDom.innerHTML = '';
  transRows.forEach((rowHtml, idx) => {
    const row = historyDom.insertRow(idx);
    row.innerHTML = rowHtml + '</tr>';
  })
}

推荐方案（符合React开发规范） #

React框架不推荐直接操作DOM，你可以用state维护交易数据，完全避免格式错乱问题：

1. 新增交易列表state

// 其他原有state保留，新增下面这行
const [transList, setTransList] = useState([]);

2. 修改存款/取款逻辑，不操作DOM直接更新state
   以存款为例：

const Deposite = () => {
  setTableVal("block")
  const time = new Date().toLocaleString();
  const oldBalance = parseInt(localStorage.getItem(getter));
  const newBalance = oldBalance + parseInt(init);
  localStorage.setItem(getter, newBalance);
  // 新增交易项到列表头部
  setTransList(prev => [{
    type: 'Deposit',
    amount: init,
    time: time,
    balance: newBalance
  }, ...prev]);
  document.getElementById("depinput").value = "";                        
}

取款方法按照同样逻辑修改即可。
3. 所有表格直接遍历state渲染，不需要操作DOM插入行
比如交易表格的tbody部分：

<tbody id="table">
  {transList.map((trans, index) => (
    <tr key={index}>
      <td>{trans.type}</td>
      <td>{trans.amount}</td>
      <td>{trans.time}</td>
      <td>{trans.balance}</td>
    </tr>
  ))}
</tbody>

4. 持久化存储直接操作交易数据数组
   存储时用localStorage.setItem('valhistory', JSON.stringify(transList))，读取时用JSON.parse(localStorage.getItem('valhistory'))赋值给transList即可，不会出现任何格式问题。

内容的提问来源于stack exchange，提问作者I.SRI RAM