为什么我必须双击才能渲染组件？

Question

单击视图图标后，我想显示一个组件。不知何故，我必须双击以显示组件。每当我单击视图图标时，都会将ISViewing设置为true，并且＆lt; viewTicket/＆gt;组件在表容器下方显示。我声明viewID和setViewId on app.js并设置usecontext文件，以便我可以在不同的组件。

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import RemoveRedEyeOutlinedIcon from '@mui/icons-material/RemoveRedEyeOutlined';
import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
import { useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { collection, deleteDoc, doc, onSnapshot } from 'firebase/firestore';
import { db } from '../../firebase';
import { Link } from 'react-router-dom';
import ViewTicket from '../viewTicket/ViewTicket';
import { UserContext } from '../../Contexts/UserContext';


const Tables = () => {
    const { viewId, setViewId } = useContext(UserContext)
    const [data, setData] = useState([]);
    const [isViewing, setIsViewing] = useState(false);

    useEffect(() => {

        const unsub = onSnapshot(collection(db, "invoices"), (snapshot) => {
            let list = [];
            snapshot.docs.forEach((doc) => {
                list.push({ id: doc.id, ...doc.data() });
            })

            setData(list)


        }, (err) => {
            console.log(err)
        });

        return () => {
            unsub();
        }

    }, [])



    return (
        <div className="conatainer">
            <TableContainer component={Paper} className="table">
                <Table sx={{ minWidth: 650 }} aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell className="tableCell">Subject</TableCell>
                            <TableCell className="tableCell">Fullname</TableCell>
                            <TableCell className="tableCell">Email</TableCell>
                            <TableCell className="tableCell">Action</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {data.map((item) => (
                            <TableRow key={item.id}>
                                <TableCell className="tableCell">{item.subject}</TableCell>
                                <TableCell className="tableCell">{item.fullname}</TableCell>
                                <TableCell className="tableCell">{item.email}</TableCell>
                                
                                <TableCell className="tableCell">
                                    <RemoveRedEyeOutlinedIcon onClick={() => {
                                        setViewId(item.id)
                                        setIsViewing(true);
                                    }} className="viewButton" />
                                    <ClearOutlinedIcon className="deleteButton" onClick={() => deleteData(item.id)} />
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
            <div>
                {!isViewing ? null :
                    <ViewTicket/>
                }
            </div>
        </div>

    )
}

export default Tables

这就是我对＆lt; viewTicket/＆gt;组件所拥有的。它需要ViewID才能从Firebase获取文档详细信息。然后显示主题和电子邮件。

import { useState, useEffect, useContext } from 'react';
import { doc, getDoc } from 'firebase/firestore';
import { db } from '../../firebase';
import { UserContext } from '../../Contexts/UserContext';

const ViewTicket = () => {
    const { viewId, setViewId } = useContext(UserContext)
    const [tempData, setTempData] = useState("");

    useEffect(() => {
        if (viewId) {
            const getUserData = async () => {
                const dataRef = doc(db, "invoices", viewId);
                const docSnap = await getDoc(dataRef);

                if (docSnap.exists()) {
                    setTempData(docSnap.data());
                } else {
                    // doc.data() will be undefined in this case
                    console.log("No such document!");
                }
            }
            viewId && getUserData();
        } else {
            console.log('id does not exist')
        }
    }, [])


    return (
        <div className="single">
            <div className="singleContainer">
                <div className="details">
                    <h1>{tempData.subject}</h1>
                    <p>{tempData.email}</p>
                </div>
            </div>
        </div>
    )
}

export default ViewTicket

数据集的示例就是这样：

const userData = [
    {
        id: "dklk30919",
        fullname: "Joe Roberts",
        email: "[email protected]",
        subject: "button doesn't work"
    },
    {
        id: "mddsakjk32",
        fullname: "Kevin Durant",
        email: "[email protected]",
        subject: "error while fetching data"
    }
]

这是我的firebase.js文件的样子。出于安全目的，我删除了所有详细信息。

// Import the functions you need from the SDKs you need
import {
    initializeApp
} from "firebase/app";
import {
    getAuth
} from "firebase/auth";

import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";


// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth();
export const storage = getStorage(app);