组件未显示在 React TypeScript 中

Question

我构建了一个请求包含一些道具的组件的页面，但是该组件没有显示。

这是我的页面代码：

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 未显示。我在页面上的地图功能中做了一个控制台登录，它确实有效。

Answer 1

尝试从此处删除 {}：

eventValues.map((eventoInfo)=> 
    <EventCard props={eventoInfo}/>
)

或者 {return <EventCard props={eventoInfo}/>}

组件未显示在 React TypeScript 中

Component is not showing in React TypeScript

reactjs

typescript

react-native

react-component

react-typescript