如何访问Redux store中的对象数据并解决相关报错问题

问题1：.jsx文件收到TS类型提示Property 'user' does not exist on type 'DefaultRootState'.ts(2339) #

• 原因：IDE的TypeScript相关插件识别到了Redux的默认TS类型定义，DefaultRootState是Redux预留的根state类型，没有自定义声明时就会触发该提示，和文件是否为.jsx格式无关。
• 解决方法：
  1. 永久修复：在项目根目录新建任意名称的.d.ts声明文件，添加如下代码覆盖默认类型，不需要TS的话直接写any即可：

  import '@reduxjs/toolkit';
  declare module '@reduxjs/toolkit' {
    interface DefaultRootState {
      user: {
        user: {
          data: any
        }
      }
    }
  }
  

  2. 临时忽略：在useSelector代码行末尾添加注释// @ts-ignore即可屏蔽单条提示。

问题2：console.log("user: " + user)输出[object Object]、渲染<h1>user: {user.firstName}</h1>报“Objects are not valid as a React child”错误 #

• 原因：
  1. 字符串和对象做拼接运算时，会自动调用对象的toString()方法，默认返回值就是[object Object]
  2. 报错说明你当前取到的user本身是对象类型，或是user.firstName是对象类型，也可能是异步请求未完成时，store初始值为空对象，字段读取结果不符合预期。
• 解决方法：
  1. 打印对象时改用逗号分隔参数，可查看完整结构：console.log("user: ", user)
  2. 渲染前添加可选链判断和兜底内容，避免异步场景报错：

  <h1>user: {user?.firstName || '暂无数据'}</h1>
  

  3. 可先打印完整根state确认路径正确：

  const user = useSelector((state) => {
    console.log('完整store结构：', state)
    return state.user.user.data
  })
  

  确认firstName字段存在且为字符串、数字等可直接渲染的基础类型，不要直接把对象放入JSX节点中。

问题3：调用localStorage.setItem('user', user)存储内容为[object Object] #

• 原因：localStorage仅支持存储字符串类型数据，传入非字符串值会自动调用toString()转换，对象转字符串默认结果就是[object Object]。
• 解决方法：存储时用JSON.stringify转成JSON字符串，读取时用JSON.parse转回对象即可：

// 存储
localStorage.setItem('user', JSON.stringify(user))
// 读取
const savedUser = JSON.parse(localStorage.getItem('user') || '{}')

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