為了訓練自己，我目前正在創建一個帶有 react 和 firebase 的社交媒體，但我遇到了這個錯誤，我無法解決，鄙視在這里尋找答案：
未捕獲的錯誤：物件作為 React 子項無效（找到：帶有鍵 {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
如果您愿意，請毫不猶豫地指出我的反應練習:)
提前謝謝你們！
uj5u.com熱心網友回復：
您只需要像這樣解構 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}}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/444499.html
標籤：javascript 反应 火力基地 谷歌云火库
上一篇：FirestoreSDK是否為同一查詢創建多個偵聽器？
下一篇：編輯器中顯示的垂直線