本文旨在解决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的写入操作放在添加或修改联系人的函数中。
以下是修改后的代码示例：
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中的数据。
关键改进：
- 移除不必要的useEffect： 删除了在每次contacts状态更新时写入LocalStorage的useEffect。
- 在addContact函数中写入LocalStorage： 在添加新联系人后，立即更新LocalStorage，确保数据持久化。
总结
正确使用useEffect钩子和LocalStorage对于构建持久化的React应用至关重要。避免在组件初始化时覆盖LocalStorage中的数据，并将LocalStorage的写入操作放在适当的事件处理函数中，可以有效地解决数据渲染问题。
注意事项：
- 确保在写入LocalStorage之前，将数据转换为JSON字符串 (JSON.stringify())。
- 在从LocalStorage读取数据后，将其解析为JavaScript对象 (JSON.parse())。
- 避免频繁地写入LocalStorage，因为这可能会影响性能。
- 考虑使用更高级的状态管理方案（如Redux、Context API或MobX）来管理复杂应用的状态，尤其是在需要跨组件共享状态时。
通过遵循这些最佳实践，可以确保React应用能够正确地从LocalStorage加载和渲染数据，提供更好的用户体验。
