我構建了一個請求包含一些道具的組件的頁面，但是，該組件沒有顯示出來。
這是我的頁面代碼：
import { useEffect, useState } from "react"
import { EventCard } from "../../../components/EventCard/EventCard";
import { Footer } from "../../../components/footer/Footer";
import { NavBar } from "../../../components/navBar/NavBar";
import { database } from "../../../services/firebase"
type FirebaseEventos = Record<string, {
category: string,
startDate: string,
title: string
}>
type Evento = {
id: string,
categoria: string,
dataInicio: string,
titulo: string
}
export function BuscarEvento(){
const [eventValues, setEventValues] = useState<Evento[]>([]);
useEffect(() =>{
const eventRef = database.ref(`eventos`);
eventRef.once('value', evento => {
//console.log(evento.val())
const databaseEventos = evento.val();
const firebaseEvent: FirebaseEventos = databaseEventos ?? {};
const parsedEventos = Object.entries(firebaseEvent).map(([key, value])=>{
return{
id: key,
categoria: value.category,
dataInicio: value.startDate,
titulo: value.title
}
})
setEventValues(parsedEventos);
})
}, [])
return(
<div>
<NavBar/>
<div className="m-5 min-vh-100">
<div className="d-flex m-3">
<div className="rounded-pill p-3" style={{color: "white", backgroundColor:"#002838"}}>
{eventValues.length} Evento(s)
</div>
</div>
<div className="d-flex flex-column card-body ">
{eventValues.length > 0 ?
(
eventValues.map((eventoInfo)=>{
<EventCard props={eventoInfo}/>
})
) : (
<div>
N?o há eventos
</div>
)}
</div>
</div>
<Footer/>
</div>
)
}在這里你可以找到我的組件代碼：
type Card = {
titulo: string,
categoria: string,
dataInicio: string
}
export function EventCard(props: {props: Card}){
console.log(props.props.categoria)
return(
<div className="d-flex">
<p>{props.props.categoria}</p>
</div>
)
}陣列有資料。組件頁面中的 console.log 沒有顯示它。我在頁面上的地圖功能中做了一個控制臺登錄，它確實有效。
uj5u.com熱心網友回復：
嘗試從此處洗掉 {}：
eventValues.map((eventoInfo)=>
<EventCard props={eventoInfo}/>
)
要么那個要么{return <EventCard props={eventoInfo}/>}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/436561.html