React中JavaScript创建的元素未显示问题排查及修复方案

问题根源 #

1. 邮箱字段获取错误: 你把整个文档对象(doc.data())赋值给了element.email，导致element.email.toString()变成[object Object]，根本没法和用户邮箱匹配。得改成doc.data().email来获取具体的邮箱字段。
2. DOM操作方式错误: React靠虚拟DOM管理页面，手动用原生JS创建插入元素的方式会和React的渲染机制冲突——要么元素还没挂载就操作，要么后续重渲染被覆盖。
3. 计数器作用域不对: count在forEach里声明，每次循环都重置为0，所有div的类名都是Ticket #1。
4. 插入位置错误: insertBefore把元素加到了userTickets的前面，不是你要的内部下方。

修复后的代码 #

import React, { useState, useEffect } from "react";
import { authService, dbService } from "../myBase";

const Mypage = () => {
    const user = authService.currentUser;
    const [userTickets, setUserTickets] = useState([]);
    const onLogOutClick = () => authService.signOut();

    useEffect(() => {
        // 订阅Firestore快照，组件挂载时启动，卸载时取消
        const unsubscribe = dbService.collection("performance-1").onSnapshot((snapshot) => {
            const tickets = snapshot.docs
                .map(doc => ({
                    id: doc.id,
                    email: doc.data().email // 正确提取邮箱字段
                }))
                .filter(ticket => ticket.email === user?.email); // 筛选当前用户的票

            setUserTickets(tickets);
            console.log("ticket updated");
        });

        return () => unsubscribe();
    }, [user?.email]);

    return (
        <div>
            <button className="logout" onClick={onLogOutClick}>Log Out</button>
            <div className="ticket-section">
                <div>Tickets</div>
                {/* 直接在JSX中渲染用户的票 */}
                {userTickets.map((ticket, index) => (
                    <div key={ticket.id} className={`Ticket #${index + 1}`}>
                        {ticket.id}
                    </div>
                ))}
            </div>
        </div>
    );
};

export default Mypage;

关键修复说明 #

1. 用React State管理数据: 用useState存储用户的票列表，快照更新时修改state，React会自动重渲染页面展示最新数据。
2. 正确提取邮箱字段: 从文档数据中直接获取email字段（如果你的字段名不是email，替换为实际名称）。
3. 用JSX渲染元素: 通过map遍历票列表生成对应的div元素，完全遵循React的渲染机制，避免DOM操作冲突。
4. useEffect处理订阅: 用useEffect包裹Firestore订阅，确保组件挂载时启动，卸载时取消，防止内存泄漏。
5. 移除body标签: React组件不应返回body标签，改用普通div作为根容器，避免和页面原有body冲突。

内容的提问来源于stack exchange，提问作者Seungho Scott Shin