reactjs - React 渲染：从 firebase 渲染数据时，对象作为 React 子级无效

问题描述

我正在尝试从 firebase db 呈现一些数据，但出现此错误：

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

这是我的代码：

索引.js

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import Navbar from '../../components/Navbar/Navbar';
import EventoCard from '../../components/evento-card/EventoCard';
import firebase from '../../config/firebase';
import './home.css';

const Home = () => {

    const [eventos, setEventos] = useState([]);
    //recuperando o banco;
    const db = firebase.firestore();
    let listaEventos = [];
    useEffect(() => {
        db.collection('eventos').get().then(async (resultado) => {
            await resultado.docs.forEach(doc => {
                listaEventos.push({
                    id: doc.id,
                    ...doc.data()
                })
            })
            setEventos(listaEventos);
        })
    })

    return (
        <>
            <Navbar></Navbar>
            <br></br>
            <div className="row">
                {eventos.map(item => <EventoCard key={item.id} titulo={item.titulo} detalhes={item.detalhes} />)}
            </div>

        </>
    );
}

export default Home;

EventoCard.js

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'
import './evento-card.css';

const EventoCard = (key, titulo, detalhes) => {
    return (
        <div className="col-md-3 col-sm-12">
            <img src="https://via.placeholder.com/150x100" className="card-img-top imgCartao" alt="Imagem Do Evento" />
            <div className="card-body">
                <h5>{titulo}</h5>
                <p className="card-text text-justify">{detalhes}</p>
                <div className="row rodape-card d-flex align-itens-center">
                    <div className="col-6">
                        <Link to='/' className="btn btn-sm btn-detalhes">+ Detalhes</Link>
                    </div>
                    <div className="col-6 text-right">
                        <i className="fas fa-eye"></i><span>12312</span>
                    </div>
                </div>

            </div>
        </div>
    )
}

export default EventoCard;

我的 json 对象基本上被定义为标题和详细信息。我认为地图功能有问题，但我不知道我在这里缺少什么。

标签： reactjs

reactjs - React 渲染：从 firebase 渲染数据时，对象作为 React 子级无效

问题描述

解决方案

推荐阅读