React 应用中从 Local Storage 渲染数据的问题解决

本文旨在解决 React 应用中从 Local Storage 渲染数据时遇到的常见问题，即在刷新或重新加载页面后，组件无法正确显示存储在 Local Storage 中的数据。我们将分析问题原因，并提供清晰的代码示例和解决方案，确保数据在页面加载后能够正确渲染。

在 React 应用中，我们经常需要将数据存储在 Local Storage 中，以便在用户刷新或重新加载页面后保持数据的持久性。然而，有时我们会遇到这样的问题：数据已经成功存储到 Local Storage 中，但在页面重新加载后，组件却无法正确渲染这些数据。本文将深入探讨这个问题的原因，并提供详细的解决方案。

问题分析

最常见的原因是在组件初始化时，useEffect 中的 localStorage.setItem 在 localStorage.getItem 之前执行。这会导致在页面加载时，Local Storage 首先被清空，然后才尝试读取数据。

以下代码是导致问题的常见模式：

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

useEffect(() => {
  const savedContacts = localStorage.getItem("contacts");

  if (savedContacts) {
    setContacts(JSON.parse(savedContacts));
  }
}, []);

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

当组件首次加载时，contacts 的初始值为 []。这会立即触发第二个 useEffect，将 localStorage 中的 "contacts" 设置为 []。然后，第一个 useEffect 尝试从 localStorage 中读取数据，但此时 localStorage 已经被清空，因此组件无法正确渲染数据。

Memories.ai

专注于视频解析的AI视觉记忆模型

下载

解决方案

为了解决这个问题，我们需要确保只有在数据发生更改时才更新 localStorage。一个有效的解决方案是将 localStorage.setItem 移动到 addContact 函数中。这样，只有在添加新联系人时，才会更新 localStorage。

以下是修改后的代码示例：

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    const savedContacts = localStorage.getItem("contacts");

    if (savedContacts) {
      setContacts(JSON.parse(savedContacts));
    }
  }, []);

  const addContact = (newContact) => {
    const newContactList = [...contacts, newContact];
    setContacts(newContactList);
    localStorage.setItem("contacts", JSON.stringify(newContactList));
  };

  return (
    

      
      {contacts.map((data, i) => (
        
      ))}
    
  );
};

// 示例 InputContact 组件
const InputContact = ({ addContact }) => {
  const [name, setName] = useState("");

  const handleAddContact = () => {
    if (name.trim() !== "") {
      addContact({ name: name, id: Math.random() });
      setName("");
    }
  };

  return (
    

       setName(e.target.value)}
      />
      Add Contact
    
  );
};

// 示例 Contact 组件
const Contact = ({ data }) => {
  return 
{data.name}
;
};

在这个修改后的示例中，useEffect 仅用于在组件挂载时从 localStorage 中读取数据。localStorage.setItem 仅在 addContact 函数中调用，确保只有在添加新联系人时才更新 localStorage。

总结与注意事项

1. 初始化状态： 确保在组件初始化时，从 localStorage 中读取数据，并将其设置为初始状态。
2. 避免不必要的更新： 避免在每次状态更改时都更新 localStorage。只在必要时（例如，添加、删除或修改数据时）才更新 localStorage。
3. 错误处理： 在从 localStorage 中读取数据时，要进行错误处理，以防止因 localStorage 中不存在数据或数据格式错误而导致应用崩溃。可以使用 try...catch 块来捕获 JSON 解析错误。
4. 性能考虑： 频繁地读写 localStorage 可能会影响应用的性能。尽量减少对 localStorage 的操作，并考虑使用其他缓存机制（例如，sessionStorage 或内存缓存）来提高性能。

通过遵循这些建议，您可以有效地解决 React 应用中从 Local Storage 渲染数据的问题，并确保您的应用能够正确地持久化和加载数据。