当我单击收件箱组件时，它在我的 window 中没有显示任何内容

Question

import React from 'react';
import './app.css';
import Inbox from "./inbox/inbox";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './nav/navbar';
import Sidebar from './sidebar/sidebar';
import Composer from './composer/composer';

function App(){
  return (
    <> 
      <Router>
        <Navbar/>
        <div className="main-page">
          <Sidebar/>
          <div className="Clicked-Item-Content">
            <Routes>
              <Route path='/inbox'  element={<Inbox />} />
              <Route path='/' element={<Composer />} />
            </Routes>
          </div>
        </div>
      </Router>
    </>
  )
}

export default App;

组件的按钮链接部分

import { NavLink } from "react-router-dom";
import "./sidebar.css";

const Sidebar = () => {
  return (
    <div className="sidebar">
      <ul>
        <li>
          <NavLink to ='/'>
            <i className="fa-solid fa-square-plus box awesome"></i>
            Composer
          </NavLink>
        </li>
        <li>
          <NavLink to ='/inbox'>
            <i className="fa-solid fa-inbox  box awesome"></i>
            Inbox
          </NavLink>
        </li>
      </ul>
    </div>
  )
}

export default Sidebar;

当我单击此Inbox组件部分时，它在屏幕上不显示任何内容屏幕完全为空，并且其他链接工作正常。 我的本地存储不是空的。 我在数组中存储了一个带有键值对的 object。 当我尝试 map 它没有显示在屏幕上时，它显示一个空屏幕。

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

  useEffect(() => {
    JSON.parse(localStorage.getItem('todos')).then(data=> setlocalStorageData(data))
    console.log(localStorageData)
    .catch(err=> console.log(err))
  }, [localStorageData])

  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>
        )
      )}
    </>
  )
}

export default Inbox;

Answer 1

JSON.parse不返回 Promise。 您可以直接从localStorage初始化localStorageData state 。 您也不想使用任何值作为无条件将 state 更新排队的 React 挂钩依赖项，因为如果没有得到适当的保护，这可能会导致渲染循环。

例子：

const Inbox = () => {
  const [localStorageData, setlocalStorageData] = useState(
    JSON.parse(localStorage.getItem('todos')) ?? []
  );

  ...

  return (
    <>
      {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>)
      )}
    </>
  );
};

该代码还使用数组索引作为映射收件箱消息的 React 键。 我强烈建议在创建数据时向数据添加一个可用作键的 GUID，以便每条收件箱消息都有一个 static 属性，该属性可以唯一地标识它，而不管它在哪里呈现。