将 localStorage 中的项目数组渲染为无序列表答案

【问题标题】：Rendering Items Array in localStorage to Unordered List将 localStorage 中的项目数组渲染为无序列表
【发布时间】：2022-01-26 07:08:25
【问题描述】：

当我单击 DisplayBtn() 时，它应该将显示状态设置为 true 并显示来自 localStorage 的 myLeads Array。 localStorage 包含 MyLeads 数组，我使用了 map() 来尝试获取项目并将它们放在无序列表中。我以前在数组上做过这个，它已经工作了，但它目前不工作。

基本上，我只是想让它们在 localStorage 中的项目呈现在一个无序列表中。我尝试了几种方法来解决这个问题我最新的错误消息是'Cannot read properties of null (reading 'map')'

import {useState} from 'react';
import List from './components/List'
import { SaveBtn } from './components/Buttons';

function App() {

  const [myLeads, setMyLeads] = useState([]);
  const [leadValue, setLeadValue] = useState({
    inputVal: ""
  })

  const [display, setDisplay] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setLeadValue((prev) => {
      return {
        ...prev,
        [name]: value,
      };
    });
  };


  const [localItems, setLocalItems] = useState(
    JSON.parse(localStorage.getItem("myLeads"))
  );

  const displayLocalItems = localItems.map((item) => {
    return <List key={item} val={item}/>
  })


  const saveBtn = () => {
    setMyLeads(prev => [...prev, leadValue.inputVal]);

    localStorage.setItem("myLeads", JSON.stringify(myLeads))
    setLocalItems((prevItems) => [...prevItems, leadValue.inputVal]);

    setDisplay(false);
  };

  const displayBtn = () => {
     setDisplay(true)
  };

  
  return (
    <main>
      <input
        name="inputVal"
        value={leadValue.inputVal}
        type="text"
        onChange={handleChange}
        required
      />

      <SaveBtn saveBtn={saveBtn} />

      <button onClick={displayBtn}>Display Leads</button>
    
      {display && (
      {displayLocalItems}
      )
    }
    </main>
  );
}

export default App;

【问题讨论】：

在将任何内容保存到本地存储之前调用 map - 那时它是空的
就像我认为如果它尚不存在则为 null JSON.parse(localStorage.getItem("myLeads"))

标签： reactjs local-storage

【解决方案1】：

你可以这样做：

const [localItems, setLocalItems] = useState(JSON.parse(localStorage.getItem("myLeads")) || []);

因此，如果本地存储为空，则将状态初始化为一个空数组，可以安全地映射。

【讨论】：