本文旨在解决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 ( {contacts.map((data, i) => ( ))} );};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 ( setFullName(e.target.value)} /> );};const Contact = ({data}) => { return ( {data.fullName} );};
在这个修改后的示例中，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加载和渲染数据，提供更好的用户体验。
以上就是解决React应用中从LocalStorage渲染数据的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588845.html
微信扫一扫 
支付宝扫一扫 
