解决React应用中从LocalStorage渲染数据的问题-html教程-PHP中文网

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

霞舞

发布： 2025-10-26 10:06:29

原创

480人浏览过

解决react应用中从localstorage渲染数据的问题

本文旨在解决React应用中从LocalStorage加载数据时，数据无法在页面刷新或重新加载后正确渲染的问题。通过分析常见原因，并提供详细的代码示例，帮助开发者理解如何正确地在React组件中使用`useEffect`钩子和LocalStorage，以确保数据的持久化和正确渲染。

在React应用中，从LocalStorage读取数据并在组件中渲染是一个常见的需求。然而，开发者经常遇到页面刷新或重新加载后，LocalStorage中的数据无法正确渲染的问题。这通常是由于对useEffect钩子的不当使用以及LocalStorage的写入时机造成的。

问题分析

问题的核心在于，在组件初始化时，contacts状态变量被初始化为空数组 []。随后，useEffect钩子尝试将此空数组写入LocalStorage。这导致每次页面加载时，LocalStorage中的数据都被重置为空，从而导致渲染问题。

  const [contacts, setContacts] = useState([
    {
      id: Math.random().toString(36).substr(2, 9),
      fullName: "Vekjko Petrovic",
      address: "121 Town Commons Way Phoenix, AZ, 45215",
      phone: 123_465_689,
      date,
    },
    {
      id: Math.random().toString(36).substr(2, 9),
      fullName: "Marko Petrovic",
      address: "Srbina 35, 11300 Smederevo Srbija",
      phone: 256_269_866,
      date,
    },
    {
      id: Math.random().toString(36).substr(2, 9),
      fullName: "Michael Jackson",
      address: "52 City St, Detroit, Mi, 46218",
      phone: 359_525_555,
      date,
    },
    {
      id: Math.random().toString(36).substr(2, 9),
      fullName: "Vanessa Parady",
      address: "11 Beogradska Beograd, SRB, 11000",
      phone: 123_465_689,
      date,
    },
  ]);

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

    if (savedContacts) {
      setContacts(savedContacts);
    }
  }, []);

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

登录后复制

上述代码中，第一个useEffect尝试从LocalStorage加载数据，第二个useEffect则在每次contacts状态更新时将数据写入LocalStorage。问题在于，组件首次渲染时，contacts的初始值（即使有初始值）会立即触发第二个useEffect，覆盖LocalStorage中的数据。

解决方案

为了解决这个问题，需要调整LocalStorage的写入时机，避免在组件初始化时覆盖已有的数据。一个推荐的做法是将LocalStorage的写入操作放在添加或修改联系人的函数中。

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

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

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 (
    <div>
      <InputContact addContact={addContact} />
      {contacts.map((data, i) => (
        <Contact data={data} key={i} />
      ))}
    </div>
  );
};

const InputContact = ({addContact}) => {
    const [fullName, setFullName] = useState('');
    const handleSaveClick = () => {
        if (fullName.trim().length > 0) {
            addContact({ fullName, id: Math.random().toString(36).substr(2, 9) });
            setFullName('');
        }
    };

    return (
        <div>
            <input
                type="text"
                placeholder="Enter Full Name"
                value={fullName}
                onChange={(e) => setFullName(e.target.value)}
            />
            <button onClick={handleSaveClick}>Add Contact</button>
        </div>
    );
};

const Contact = ({data}) => {
    return (
        <div>
            {data.fullName}
        </div>
    );
};

登录后复制

在这个修改后的示例中，LocalStorage的写入操作被移动到了addContact函数中。只有在添加新联系人时，才会更新LocalStorage中的数据。

关键改进：