错误：对象作为 React 子项无效。 如果您打算渲染一组孩子，请改用数组

Question

I'm having this error message, which I am not really sure how to handle. Technically, what I want to do is to upload an image into the database and then display it.

Each time I try to upload an image, this appears. The image has successfully been uploaded to the database, but it is giving me this error instead of rendering the image on the screen.

I have defined setPosts like this:

const [posts, setPosts] = useState([]);

I'm guessing the problem is related to the database since on Firebase it looks like this, which I'm certain it's not supposed to.

Here is the code for UploadImage.js:

const handleUpload = () => {
    const uploadTask = storage.ref(`images/${image.name}`).put(image); 
    uploadTask.on(
        () => {
          storage
            .ref("images")
            .child(image.name)
            .getDownloadURL()
            .then((url) => {
                db.collection("posts").add({
                    timestamp:firebase.firestore.FieldValue.serverTimestamp(), 
                    caption: caption,
                    imageUrl: url, 
                    username: username
                });

                setCaption("");
                setImage(null);
            });
        }
    );
};

I'm kinda new to ReactJS and Firebase. Any help would be appreciated!

UPDATE : this is how i render "Post" in App.js

{
        posts.map(({id, post}) => (
            <Post key={id} postId={id} user={user} username={post.username} caption={post.caption} imageUrl={post.imageUrl}/>
        ))
 }

Answer 1

I had this same issue with this same code-along. Your question helped me figure out the answer.

Go to your firebase console and check each document (the "posts"). You probably have some from earlier in the code-along. Check the 'username' for each document. If any of them are an object (they have a down arrow that expands to show another 'username' that is type (string)), delete those. After doing that, it left me with my most recent upload attempt (you might have to drop all of your earlier 'posts') - but then it worked.