React中localStorage数组调用Array.map报错：Array.map is not a function

问题根源 #

localStorage只能存储字符串，你拿到的内容如果没做JSON.parse()解析，本质是字符串——控制台会把"[{},{}]"这种格式的字符串显示得像数组，但它的原型是String，根本没有map方法。另外如果存储时没正确转成字符串，或者初始状态下对应键的值是null/undefined，也会触发这个报错。

解决方法 #

1. 正确解析存储数据
   取数据时必须解析，同时兜底空数组避免空值报错：

   const stored = localStorage.getItem('yourStorageKey');
   const dataList = stored ? JSON.parse(stored) : [];
   

2. 调用前做类型校验
   确保是数组再调用map，彻底避免非数组类型的问题：

   const renderItems = Array.isArray(dataList) 
     ? dataList.map(item => <div key={item.id}>{item.content}</div>)
     : null;
   

3. 规范存储逻辑
   存数组到localStorage时，必须用JSON.stringify()转成字符串：

   const targetArray = [{id: 1, content: 'demo'}];
   localStorage.setItem('yourStorageKey', JSON.stringify(targetArray));
   

排查小技巧 #

• 控制台打印时别只看表面，右键选查看对象原型确认是不是Array；或者直接打typeof dataList，如果输出string，就是没做解析。
• 组件初始渲染时，给数据默认空数组，避免localStorage无数据时出现undefined.map的问题。

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