[英]React/FireStore : Error: Objects are not valid as a React child
To train myself i'm currently creating a social media with react and firebase and i'm getting this error i can't resolve despise searching for answer here:为了训练自己,我目前正在创建一个带有 React 和 firebase 的社交媒体,我遇到了这个错误,我无法解决鄙视在这里寻找答案:
Uncaught Error: Objects are not valid as a React child (found: object with keys {message, user}).
未捕获的错误:对象作为 React 子项无效(找到:object,键为 {message, user})。 If you meant to render a collection of children, use an array instead.
如果您打算渲染子集合,请改用数组。
To be clear, a "mood" can be viewed such as a facebook or status or an instagram post.明确地说,可以查看“心情”,例如 facebook 或状态或 Instagram 帖子。
here's my code:这是我的代码:
Firebase.js 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 };
Home.js首页.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
Mood.js情绪.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
and don't hesitate to point out my react practice if you feel like it:)如果您愿意,请毫不犹豫地指出我的反应练习:)
thanks in advance guys!提前谢谢大家!
You just need to destructure the props in Mood component like this, and also you need to add another prop id={id} in home component你只需要像这样解构 Mood 组件中的道具,你还需要在 home 组件中添加另一个道具 id={id}
function Mood({id, message, user}) { return ( <div className='mood'> <h4>{id}</h4> <h5>{user}</h5> <p>{message}</p> </div> ) }
and another thing i can see is bad is in Home return statement when you are destructuring, do this instead {id, {message, user}}我可以看到的另一件事是在你解构时在 Home return 语句中,而不是这样做 {id, {message, user}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.