在 React js 中从实时数据库获取数据的问题

Question

I have some issue with fetching the data from firebase live database.

The datastructure which i want to fetch looks like that:

enter image description here

Here is my sample code:

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { getDatabase, ref, set, onValue } from "firebase/database";


import { db } from "../utils/firebase";


const ClientDetailLive = (props) => {
  const params = useParams();
  const { userID } = useParams();
  const { eventID } = useParams();
  const { participantID } = useParams();

  const [event, setEvent] = useState([]);
  const [participant, setParticipants] = useState("");

  useEffect(() => {
   
 const dbRef = ref(
      db,
      "myPath"
    );

    onValue(dbRef, (snapshot) => {
      const data = snapshot.val();
      console.log(data);
      setEvent(data);

  }, []);

    return (
    <>
      Client stuff: {JSON.stringify(params)}
      <h1></h1>
      UserID: {userID}
      <h1></h1>
      Event: {eventID}
      <h1></h1>
      Participant: {participantID}
      <div key={event.id}>
 
        <h2>Event Name: {event.Title}</h2>
        <h2>Datum: {Date(event.Time)}</h2>
       
      </div>{" "}
      <h1>"Ihre Daten"</h1>     

     <h2>Name: {event.Particpants[0].Name}</h2>
    
    </>

  );
};

export default ClientDetailLive;

Everything works like expected, the only issue Iam facing is, whenever iam accessing the "Participants" i get follwoing error:

ClientDetailLive.js:85 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at ClientDetailLive (ClientDetailLive.js:85:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

Thank you in advance.

I would expect that the participant name will be shown on the display. Since the data exists and is not undefined.

Answer 1

You initialize event with [] here:

const [event, setEvent] = useState([]);

But then you use it in the rendering code with:

<h2>Name: {event.Particpants[0].Name}</h2>

Since you initialize event with [] , it doesn't have a Particpants property and there's no [0] on it.

You'll want to ensure that event has a non-empty Participants array before rendering it. Something like:

<h2>Name: {event.Participants && event.Participants.length ? event.Participants[0].Name : "Loading..."}</h2>