如何在 React 中正确从 localStorage 读取并渲染对象数组-js教程-PHP中文网

如何在 React 中正确从 localStorage 读取并渲染对象数组

本文详解如何将对象数组安全存入 localStorage，并在 React 应用中正确解析、遍历与渲染，避免常见的 obj.map is not a function 错误。核心在于：localStorage 只支持字符串，存入前需 JSON.stringify()，读取后必须 JSON.parse() 还原为数组或对象。

本文详解如何将对象数组安全存入 localstorage，并在 react 应用中正确解析、遍历与渲染，避免常见的 `obj.map is not a function` 错误。核心在于：localstorage 只支持字符串，存入前需 `json.stringify()`，读取后必须 `json.parse()` 还原为数组或对象。

在 React 开发中，利用 localStorage 持久化轻量级数据（如待办任务列表）非常常见。但一个典型误区是：误将已序列化的字符串当作原生 JavaScript 数组直接调用 .map() —— 这正是你遇到 obj.map is not a function 报错的根本原因。

从你的控制台日志可见：

Storage { "Lista-tareas": "[object Object],[object Object]", length: 1 }

这说明当前存储的值并非合法 JSON 字符串，而是多个 toString() 后拼接的无效字符串（"[object Object],[object Object]"）。这是因错误地直接存入了未序列化的对象数组，例如：

❌ 错误写法（导致数据损坏）：

Ink — React for interactive command-line apps.

Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。

下载

// 千万不要这样做！
localStorage.setItem("Lista-tareas", [{ text: "Learn React" }, { text: "Build App" }]);
// 实际存入的是："[object Object],[object Object]"

✅ 正确做法分三步：

存入时：始终使用 JSON.stringify()
确保数组被转换为标准 JSON 字符串：

const tasks = [
  { id: 1, text: "Learn React", completed: false },
  { id: 2, text: "Build App", completed: true }
];
localStorage.setItem("Lista-tareas", JSON.stringify(tasks));

读取时：必须用 JSON.parse() 还原为数组
localStorage.getItem() 返回的是字符串，不解析就无法调用 .map()：

const stored = localStorage.getItem("Lista-tareas");
// stored 是字符串，如：'[{"id":1,"text":"Learn React","completed":false},...]'
const tasks = stored ? JSON.parse(stored) : []; // 注意空值防护
console.log(tasks); // ✅ 现在是真正的数组，可 map
console.log(tasks.map(t => t.text)); // ✅ 正常输出 ["Learn React", "Build App"]

在 React 组件中安全使用（含错误处理）
推荐封装为自定义 Hook 或组件内逻辑，并加入异常捕获：

import { useState, useEffect } from 'react';

function TaskList() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    try {
      const saved = localStorage.getItem("Lista-tareas");
      if (saved) {
        const parsed = JSON.parse(saved);
        // 额外校验：确保是数组
        if (Array.isArray(parsed)) {
          setTasks(parsed);
        } else {
          console.warn("Stored data is not an array, resetting.");
          setTasks([]);
        }
      }
    } catch (err) {
      console.error("Failed to parse localStorage data:", err);
      setTasks([]);
    }
  }, []);

  return (