localStorage - 获取和设置答案

【问题标题】：localStorage - get and setlocalStorage - 获取和设置
【发布时间】：2021-10-25 14:04:27
【问题描述】：

我是 React 的新手，正在学习 Youtube 上的初学者课程。在一节中，培训师正在解释如何使用浏览器的 localStorage 来获取和设置项目。但是，我不明白为什么要先用 getItem 调用 useEffect 而不是用 setItem 调用 useEffect。如果我将 setItem 代码放在 getItem 上方，则它不起作用。

请检查下面的代码

import React, { useState, useEffect} from 'react';
import { uuid } from 'uuidv4';
import './App.css';
import Header from './Header';
import AddContact from './Addcontact';
import ContactList from './ContactList';

function App() {

  const LOCAL_STORAGE_KEY = "contacts";

  const [contacts, setContacts] = useState([]);

  const addContactHandler = (contact) => {
    console.log(contact);
    setContacts([...contacts, {id: uuid(), ...contact}]);
  }

  const removeContactHandler = (id) => {
    const newContactList = contacts.filter((contact) => {
      return contact.id !== id;
    });

    setContacts(newContactList);
  }
  useEffect(()=>{
    const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts)));
    if(retrieveContacts) setContacts(retrieveContacts);
  }, [])

  useEffect(()=>{
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  }, [contacts])

  return (
    <div className="ui container">
      <Header/>
      <AddContact addContactHandler={addContactHandler}/>
      <ContactList contacts={contacts} getContactId={removeContactHandler} />
    </div>
  );
}

export default App;

【问题讨论】：

标签： javascript reactjs ecmascript-6 local-storage

【解决方案1】：

useEffect 的顺序很重要

  useEffect(()=>{
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  }, [contacts])

  useEffect(()=>{
    const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts)));
    if(retrieveContacts) setContacts(retrieveContacts);
  }, [])

像上面那样反转它会将 localStorage 设置为空，因为 contacts 初始化为空，然后您将其设为空并在下一次 useEffect 时更新您的状态

contacts在初始化时是一个空数组：

const [contacts, setContacts] = useState([]);

所以更改顺序是在执行以下操作：

localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));

用 [] 清空本地存储

检索我们刚刚设置为空的本地存储：

const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts)));

更新我们的状态为空：

if(retrieveContacts) setContacts(retrieveContacts);

【讨论】：