React中如何读取LocalStorage存储对象的Msg属性并在其他组件展示

首先要确认你存储对象到LocalStorage时的操作是否正确——因为LocalStorage只能存储字符串，直接存对象会被转为"[object Object]"，后续解析会失败。正确的存储方式应该是先用JSON.stringify把对象转为字符串：

// 存储时的正确代码
const todoObj = {Msg:"blah", isDeleted:false, isCompleted:"false", id:1};
localStorage.setItem("todos", JSON.stringify(todoObj));

接下来在目标React组件中，你可以这样获取并展示Msg属性：

函数组件示例 #

import React from 'react';

const TodoDisplay = () => {
  // 从LocalStorage取数据，解析后兜底空对象避免报错
  const storedTodo = JSON.parse(localStorage.getItem("todos")) || {};

  return (
    <div>
      {/* 直接访问Msg属性，可选添加默认值处理未定义情况 */}
      <p>消息内容：{storedTodo.Msg || '暂无数据'}</p>
    </div>
  );
};

export default TodoDisplay;

关键注意事项 #

• 必须处理localStorage.getItem("todos")返回null的情况（比如首次加载还没存储数据），用|| {}兜底，否则访问null.Msg会抛出错误。
• 如果你的"todos"键存储的是数组（比如多个待办项），需要调整解析逻辑：

  const storedTodos = JSON.parse(localStorage.getItem("todos")) || [];
  // 假设取第一个项的Msg，可选链操作符避免数组为空时报错
  <p>{storedTodos[0]?.Msg || '暂无数据'}</p>
  

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