如何在ReactJS中将localStorage的数组映射渲染到表格中

DevOps 小满

2026-9-29

问题原因

localStorage只能存储字符串类型，你当前直接将数组存入localStorage时，数组会被自动隐式转换为逗号拼接的字符串，丢失了原有的数组结构，读取时自然无法直接按数组遍历
序列化/反序列化方法使用场景错误：读取本地存储数据时需要先用JSON.parse()转成数组，写入本地存储时才需要用JSON.stringify()将数组转为字符串，你代码里两处的使用逻辑完全颠倒了
读取数据后额外用[]包裹字符串，导致map遍历的对象本质是只有1个元素（整段拼接字符串）的数组，自然渲染出整行拼接的错误效果

修正后代码

// 读取本地存储数据用于渲染：先转数组，无数据时默认空数组
// 注意和存储时的key保持一致，你原代码读的是pls、存的是Data，按需调整即可
const dataList = JSON.parse(localStorage.getItem('Data') || '[]');

...
function handleSubmit(e){
   e.preventDefault();
   // 1. 读取已有数据，转成数组
   const existingData = JSON.parse(localStorage.getItem('Data') || '[]');
   // 2. 新增输入值（React更推荐用受控组件拿输入值，不用getElementById）
   const inputValue = document.getElementById("inputKey").value;
   existingData.push(inputValue);
   // 3. 转成字符串后再存入localStorage
   localStorage.setItem("Data", JSON.stringify(existingData));
}
...
return(
   <div>
     <Table>
       <tbody>
         {dataList.map((item, index) => (
             <tr key={index}>
                <td>{item}</td>
             </tr>
          ))}
       </tbody>
     </Table>
   </div>
)

补充说明