React组件从localStorage取数，页面重载后内容消失求助

你遇到的问题核心是直接在组件顶层同步读取localStorage，未结合React状态管理与生命周期处理数据加载，导致页面重载时数据读取时机或状态维护出现异常。

修改后的代码： #

import React, { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';

function Userinfo() {
    const { user } = useParams();
    const [userInfo, setUserInfo] = useState([]);
    const [userPosts, setUserPosts] = useState([]);

    useEffect(() => {
        // 读取localStorage并处理空值
        const localUsers = JSON.parse(localStorage.getItem('log')) || [];
        const filteredUsers = localUsers.filter(x => x.us === user);
        setUserInfo(filteredUsers);

        const localPosts = JSON.parse(localStorage.getItem('posts')) || [];
        const filteredPosts = localPosts.filter(x => x.user === user);
        setUserPosts(filteredPosts);
    }, [user]); // 依赖user参数，当路由参数变化时重新获取数据

    return (
        <>
            {userInfo.map(x => (
                <div key={x.us} className="userInfo"> {/* 添加唯一key属性，避免React警告 */}
                    <h1><small>Hola</small> {x.us}</h1>
                    <h2><small>Edad </small>{x.age}</h2>
                    <h2><small>Posteos de </small>{user}</h2>
                </div>
            ))}
            {userPosts.map(x => (
                <div key={x.id} className="posteo"> {/* 添加唯一key属性 */}
                    <h1><Link to={`/posts/${x.id}`}>{x.post}</Link></h1>
                    <h3>posteo {x.user}</h3>
                </div>
            ))}
        </>
    );
}

export default Userinfo;

关键修改点说明： #

• 用useState存储数据：将从localStorage读取的数据存入组件状态，确保数据在组件渲染周期内被稳定维护，不会因重新渲染丢失。
• useEffect处理时机问题：在组件挂载或路由参数user变化时再读取localStorage并更新状态，保证数据读取时机与组件生命周期同步。
• 空值兜底处理：给JSON.parse添加|| []，避免localStorage中无数据时返回null导致filter调用报错。
• 添加key属性：修复React列表渲染缺少唯一key的潜在警告，提升渲染稳定性与性能。

额外排查方向： #

如果修改后问题仍存在，检查：

• 其他组件是否有修改log或posts localStorage项的逻辑，导致页面重载时数据被意外清空。
• 浏览器隐私设置是否禁止了localStorage存储（比如开启了隐私模式）。

内容的提问来源于stack exchange，提问作者skinnyleonard