解决React应用中从LocalStorage渲染数据的问题_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-26

浏览次数：次

返回列表

解决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 s*edContacts = JSON.parse(localStorage.getItem("contacts"));

    if (s*edContacts) {
      setContacts(s*edContacts);
    }
  }, []);

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

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

解决方案

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

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

PHP经典实例(第二版)

PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We

470 查看详情 PHP经典实例(第二版)

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

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

  useEffect(() => {
    const s*edContacts = localStorage.getItem("contacts");

    if (s*edContacts) {
      setContacts(JSON.parse(s*edContacts));
    }
  }, []);

  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 handleS*eClick = () => {
        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={handleS*eClick}>Add Contact</button>
        </div>
    );
};

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