ReactJS-对象作为React子对象无效

Question

嗨，我正在用react和firebase编写一个基本的消息应用程序，除了将firebase数据作为道具传递到屏幕上之外，一切都在工作。现在我收到这个错误：react-dom.development.js:11340 Uncaught Error: Objects are not valid as a React child (found: object with keys {id, message, timestamp, user}). If you meant to render a collection of children, use an array instead这是我的App.js:的代码

import "./App.css";
import { FormControl, InputLabel, Input, Button } from "@material-ui/core";
import SendIcon from "@material-ui/icons/Send";
import { useEffect, useState } from "react";
import { db } from "./firebase";
// import firebase from "firebase";
import Message from "./Message";
import firebase from "@firebase/app";
function App() {
const [userName, setUserName] = useState("");
const [input, setInput] = useState("");
const [messages, setMessages] = useState([]);
console.log(messages);
console.log(db);
const getMessages = () => {
db.collection("messages").onSnapshot(function (querySnapshot) {
setMessages(
querySnapshot.docs.map((doc) => ({
id: doc.id,
message: doc.data().message,
timestamp: doc.data().timestamp,
user: doc.data().user,
}))
);
});
};
console.log(messages);
const sendMessage = (e) => {
e.preventDefault();
db.collection("messages").add({
message: input,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
user: userName,
});
setInput("");
};
useEffect(() => {
setUserName(prompt("Enter Your Name"));
getMessages();
}, []);
return (
<div className="App">
<h1>Welcome {userName}!</h1>
<div className="form-div">
<form className="form">
<FormControl className="form-input">
<InputLabel>Enter a Message</InputLabel>
<Input
value={input}
onChange={(e) => {
setInput(e.target.value);
}}
/>
</FormControl>
<div className="button-div">
<Button
style={{ backgroundColor: "rgb(0, 110, 255)" }}
className="send-button"
variant="contained"
color="primary"
type="submit"
onClick={sendMessage}
disabled={!input}
>
<SendIcon></SendIcon>
</Button>
</div>
</form>
</div>
{messages.map((message, id) => (
<>
<Message key={id} message={message}></Message>
</>
))}
</div>
);
}
export default App;

这是我的Message组件的代码：import React from"；反应"；；

const Message = (message) => {
return (
<div>
<p>{message.message}</p>
</div>
);
};
export default Message;.

帮助将不胜感激，因为我是初学者，我已经尝试过其他灵魂，如降级firebase，但我仍然得到这个错误。我也尝试过以个人身份传递道具，例如message=message.message，但我仍然收到相同的错误

Answer 1

由于在任何地方都使用message关键字，因此您的代码中存在混淆，我建议您使用适当的变量名。

你的消息结构看起来像

[{id: 1, message: 'hi', user: 'asd', timestamp: ''}, {id: 2, message: 'hi1', user: 'asd1', timestamp: ''}]

只需像下面的一样更改Message组件

const Message = ({message: msgInst}) => {
return (
<div>
<p>{msgInst.message}</p>
<p>{msgInst.user}</p>
</div>
);
};