数据无法从本地存储获取（反应）

Question

我只是尝试在本地存储中设置一些联系人数据并在 DOM 上渲染，但是重新加载页面后，localStorage 中没有可以在 DOM 中渲染的联系人数据！ 我在其他浏览器中尝试过，但结果是相同的。

这是我的代码：

import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import ContactForm from "./ContactForm";
import ContactList from "./ContactList";

const ContactApp = () => {
  const [contacts, setContacts] = useState([]);

  const addContactHandler = (formValues) => {
    if (!formValues.name || !formValues.email) {
      toast.error("Name and email are required");
      return;
    }
    setContacts([...contacts, { ...formValues, id: Date.now() }]);
  };

  const deleteContactHandler = (id) => {
    setContacts(contacts.filter((contact) => contact.id !== id));
  };

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

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

  return (
    <div className="contact-app">
      <nav>
        <h1>Contact Manager</h1>
      </nav>
      <ContactForm onClick={addContactHandler} />
      <ContactList onDelete={deleteContactHandler} contacts={contacts} />
    </div>
  );
};

export default ContactApp;

Answer 1

解释如下：

当您调用函数从

localstorage

获取数据时，您还将 contacts 变量设置为新数据。

useEffect(() => {
    const savedContacts = JSON.parse(localStorage.getItem("contacts"));
    if (savedContacts) setContacts(savedContacts); // Here you are changing the value of 'contacts'
}, []);

但是，每当 contact 变量的值发生变化时，您也会调用

localStorage.setItem

方法。

useEffect(() => {
    localStorage.setItem("contacts", JSON.stringify(contacts));
}, [contacts]); // Here you are calling it when the contacts change.

基本上，当组件在第一个 useEffect 中加载时。您正在检查联系人是否存在并将联系人变量设置为现有联系人。

但是您还设置了

localStorage

WHENEVER

contacts

变量的值发生变化。

就像：
首次加载并存储数据时获取数据 --> 因为您已存储数据并且

contacts

的值已更改，所以它会再次设置联系人的值 ----> 如果联系人尚未具有某些默认值，这可能会导致存储

undefined

或

[]

值。

希望这有帮助。