React/FireStore：错误：对象作为 React 子项无效

Question

为了训练自己，我目前正在创建一个带有 React 和 firebase 的社交媒体，我遇到了这个错误，我无法解决鄙视在这里寻找答案：

未捕获的错误：对象作为 React 子项无效（找到：object，键为 {message, user}）。 如果您打算渲染子集合，请改用数组。

明确地说，可以查看“心情”，例如 facebook 或状态或 Instagram 帖子。

这是我的代码：

Firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
    apiKey: "***************************",
    authDomain: "*******.firebaseapp.com",
    projectId: "********",
    storageBucket: "**************",
    messagingSenderId: "**************",
    appId: "*****************************************"
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();
const auth = firebase.auth();

export { auth, db };

首页.js

import React, { useState, useEffect } from 'react'
import Header from '../shared/header/Header'
import Mood from '../shared/mood/Mood';
import './Home.css'
import { doc, onSnapshot } from "firebase/firestore";
import { db } from '../../services/firebase';

function Home() {

  const [moods, setMoods] = useState([]);

  useEffect(() => {
    db.collection("mood").onSnapshot((querySnapshot) =>
      setMoods(
        querySnapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data()
        }))
      ));
    console.log(moods);
  }, []);

  return (
    <div className='home'>
      <Header />
      <div className='feed'>
        {moods.map(({id, data: {message, user}}) => (
            <Mood 
            key={id}
            message={message}
            user={user}
            />
          ))}
      </div>
    </div>
  )
}

export default Home

情绪.js

import React from 'react'
import './Mood.css'

function Mood(id, message, user) {
  return (
    <div className='mood'>
        <h4>{id}</h4>
        <h5>{user}</h5>
        <p>{message}</p>
    </div>
  )
}

export default Mood

如果您愿意，请毫不犹豫地指出我的反应练习:)

提前谢谢大家！

Answer 1

你只需要像这样解构 Mood 组件中的道具，你还需要在 home 组件中添加另一个道具 id={id}

 function Mood({id, message, user}) { return ( <div className='mood'> <h4>{id}</h4> <h5>{user}</h5> <p>{message}</p> </div> ) }

我可以看到的另一件事是在你解构时在 Home return 语句中，而不是这样做 {id, {message, user}}