React中存取localStorage对象列表报错：obj.map不是函数

问题根源 #

• localStorage只能存储字符串类型数据，你存对象列表时没做JSON序列化，直接存数组的话，JS会自动调用数组的toString()方法，把每个对象转成[object Object]再拼接成字符串，所以存进去的是"[object Object],[object Object]"这种无效格式。
• 取数据时你直接拿到的是这个字符串，字符串没有map方法，自然报错；而JSON.stringify(obj)只是把这个字符串再转成JSON字符串，结果就是"[object Object],[object Object]"，完全没用。

正确的存取流程 #

存储对象列表 #

把对象数组用JSON.stringify()转成标准JSON字符串后再存入localStorage：

const taskList = [
  { text: "任务1" },
  { text: "任务2" }
];
// 转成JSON字符串再存储
window.localStorage.setItem("Lista-tareas", JSON.stringify(taskList));

取出并使用对象列表 #

用JSON.parse()把取到的JSON字符串转回JS数组，之后就能正常调用map了：

let objStr = window.localStorage.getItem("Lista-tareas");
// 转成JS数组
let taskArray = JSON.parse(objStr);
// 现在可以正常用map
console.log(taskArray.map(value => value.text)); // 输出 ["任务1", "任务2"]

你的代码修正版 #

// 先修正存储逻辑（如果之前存错了，先重新存正确的数据）
const correctTaskList = [/* 你的对象列表 */];
localStorage.setItem("Lista-tareas", JSON.stringify(correctTaskList));

// 取出并处理
let objStr = window.localStorage.getItem("Lista-tareas");
let taskArray = JSON.parse(objStr);
console.log(taskArray.map(value => value.text));

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