Question

我使用 VS Code 和 React 创建了一个教程。我使用材料用户界面。对于后端，我使用 Firebase。

这是教程：https://www.youtube.com/watch?v=f7T48W0cwXM .

这是我第一次使用 react。有一个问题我无法调试。我不知道，当这个错误出现时，我怎么能理解这个“问题”。

我想先感谢大家！

这是代码的一部分：

import React, { useState, useEffect } from "react";
import './App.css';
import Post from './Components/Post';
import { db, auth } from './db/firebase';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import { Button, Input } from "@material-ui/core";
import ImageUpload from './Components/ImageUpload';

function getModalStyle() {
  const top = 50;
  const left = 50;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

const useStyles = makeStyles((theme) => ({
  paper: {
    position: 'absolute',
    width: 400,
    backgroundColor: theme.palette.background.paper,
    border: '2px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
}));

function App() {
    const classes = useStyles();
    const [modalStyle] = React.useState(getModalStyle);

    const [posts, setPosts] = useState([]);
    const [open, setOpen] = useState(false);
    
    const [openSignIn, setOpenSignIn] = useState(false);
    const [email, setEmail] = useState('');
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const [user, setUser] = useState(null);


    useEffect(() => {
      const unsubscribe = auth.onAuthStateChanged((authUser) => {
        if (authUser) {
            // USer has logged in
            console.log(authUser);
            setUser(authUser);
        }else{
            // User has logged out
            setUser(null);
        }
      })

      return () => {
        unsubscribe();      }

    },[user,username]);

    const signUp = (event) => {
        event.preventDefault();
      
        auth.createUserWithEmailAndPassword(email, password)
        .then((authUser) => {
          return authUser.user.updateProfile({
            displayName: username
          })
        })
        .catch((error) => alert (error.message));
        
        setOpen(false);

    }

    useEffect(() => {
      db.collection("posts").onSnapshot((snapshot) => {
        setPosts(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            post: doc.data(),
          }))
        );
      });
    }, []);
    
    const signIn = (event) => {
      event.preventDefault();

      auth.signInWithEmailAndPassword(email, password)
      .catch((error) => alert(error.message))

      setOpenSignIn(false);
    }
    
    return ( 

    <div className="app">

      { user?.displayName ? (
        <ImageUpload username = {user.displayName} />
      ) : (
        <h3>You need to Login to Upload </h3>
      )}
      
      <Modal
        open={open}
        onClose={() => setOpen(false)}
      >
       <div style={modalStyle} className={classes.paper}>
        <form className ="app__signup">
          <center>
            <img 
              className="app__headerImage"
              src="https://instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
              alt=""
            />
          </center>
            <Input
                placeholder="username"
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}   
            />
            <Input
                placeholder="email"
                type="text"
                value={email}
                onChange={(e) => setEmail(e.target.value)}   
            />
            <Input
                placeholder="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}   
            />
            <Button type="submit" onClick={signUp}>Sign Up</Button>
       </form>     
      </div>
      </Modal>
      
      <Modal
        open={openSignIn}
        onClose={() => setOpenSignIn(false)}
      >
       <div style={modalStyle} className={classes.paper}>
        <form className ="app__signup">
          <center>
            <img 
              className="app__headerImage"
              src="https://instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
              alt=""
            />
          </center>
            <Input
                placeholder="email"
                type="text"
                value={email}
                onChange={(e) => setEmail(e.target.value)}   
            />
            <Input
                placeholder="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}   
            />
            <Button type="submit" onClick={signIn}>Sign In</Button>
       </form>     
      </div>
      </Modal>

      <div className="app__header">
           <img 
              className="app__headerImage"
              src="https://instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
              alt=""
            />
      </div>

      {user ? (
      <Button onClick={() => auth.signOut()}>Logout</Button>

      ):(
        <div className="app__logincontainer">
          <Button onClick={() => setOpenSignIn(true)}>Sign In</Button>
          <Button onClick={() => setOpen(true)}>Sign Up</Button>

        </div>
      )}


      

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

export default App;

Answer 1

firebase db.collection().onSnapshot() api 很可能返回一个对象，而不是预期的数组，请考虑使用 .get 方法并像这样使用 setPost。

useEffect(() => {
  db.collection("posts").get().then((snapshot) => {
    const posts = snapshot.docs.map(doc => ({
      id: doc.id,
      post: doc.data(),
    })
    setPost(posts)
  };
}, []);

Answer 2

我为我的错误找到了解决方案！

我设置的数据库不对！谢谢大家的帮助！

Instagram 克隆错误：对象作为 React 子对象无效

2 个答案: