React项目Inbox组件点击后空白，LocalStorage数据无法渲染求助

核心问题分析 #

• JSON.parse使用错误：JSON.parse是同步方法，返回解析后的数据而非Promise，调用.then()会触发TypeError，导致state无法更新。
• useEffect依赖循环：把localStorageData设为依赖项，每次更新state都会重新执行useEffect，形成无限循环。
• 错误处理缺失：未处理localStorage读取/解析失败的情况，出错后直接阻断数据加载，state保持初始空数组，页面无内容渲染。

修复后的Inbox组件代码 #

import { useEffect, useState } from "react";
import "./inbox.css";
 
const Inbox = () => {
  const [localStorageData, setLocalStorageData] = useState([])

  useEffect(() => {
    try {
      const storedData = localStorage.getItem('todos');
      if (storedData) {
        const parsedData = JSON.parse(storedData);
        // 校验解析结果是否为数组，避免非数组数据导致map报错
        if (Array.isArray(parsedData)) {
          setLocalStorageData(parsedData);
        }
      }
    } catch (err) {
      console.error('读取本地存储数据失败:', err);
      setLocalStorageData([]);
    }
    // 空数组依赖，仅组件挂载时执行一次
  }, [])

  return (
    <>
      {localStorageData.length > 0 ? (
        localStorageData.map((element, index)=> (
          <div className="inbox" key={index}>
            <div className="bullet">&#x27A3;</div>
            <div className="msg">{element.message}</div>
            <div className="btn-container">
              <div className="date">{element.title}</div>
              <div className="edit btn hide">
                <i className="fa-solid fa-pen-to-square"></i>
              </div>
              <div className="delete btn hide">
                <i className="fa-solid fa-trash"></i>
              </div>
            </div>
          </div>
        ))
      ) : (
        <div className="empty-inbox">暂无消息</div>
      )}
    </>
  )
}

export default Inbox;

关键修复说明 #

1. 移除异步调用：JSON.parse是同步操作，直接处理解析结果，无需.then()。
2. 修正useEffect依赖：依赖项设为空数组，仅在组件首次挂载时读取一次本地存储，避免循环触发。
3. 添加错误捕获：用try/catch处理解析异常，防止报错阻断流程。
4. 空状态优化：数据为空时显示提示文本，避免页面完全空白。
5. 数据类型校验：确认解析后的数据是数组，防止非数组数据调用map时报错。

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