Блог

 import React,{ useContext,useState } from 'react'
import "./style.css";
import { SignInBtn } from '../../componenets'
import { UserContext} from '../../contexts/user';
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import makeId from '../../helper/functions';
import { storage ,db } from '../../firebase';
import firebase from "firebase";


export default function CreatePost() {
    const [user, setUser] = useContext(UserContext).user;
    const [caption, setCaption] = useState("");

    const [image, setImage] = useState(null);

    const [progress, setProgress] = useState(0);

    const handleChange = (e) => {
        if(e.target.files[0]){
            setImage(e.target.files[0]);

            var selectedImageSrc=URL.createObjectURL(e.target.files[0]);
        
            var imagePreview =  document.getElementById("image-preview");

            imagePreview.src=selectedImageSrc;
            imagePreview.style.display="block";
        }

    };

    const handleUpload =() => {
        if(image){
            var imageName = makeId(10);
            const uploadTask=storage.ref(`images/${imageName}.jpg`).put(image);

            uploadTask.on("state_changed",(snapshot) =>{
                // progress function

                const progress=Math.round((snapshot.bytesTransferred/snapshot.totalBytes)*100);

                setProgress(progress);
            }, (error) => {
                console.log(error);
            }, () => {
                //get download url and upload the post info

             storage
            .ref("images")
            .child(`${imageName}.jpg`)
            .getDownloadURL()
            .then((imageUrl) => {

                   db.collection("posts").add({
                    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                    caption:caption,
                    photoUrl: imageUrl,
                    username: user.email.replace("@gmail.com",""),
                    profileUrl: user.photoUrl

                });
                })
            });
        }
    }; //handle upload check image exist

    return (
        <div className = "createPost">
           
        {user ? (
            <div className ="createPost__loggedIn">
            <p> Create Post </p>
            <div className ="createPost__loggedInCenter">
                <textarea className ="createPost__textarea"
                rows ="3"
                placeholder="Enter Caption Here"
                value ={caption}
                onChange = {(e) => setCaption(e.target.value)}    >            
                </textarea>

                <div className="createPost__imagePreview">
                  <img id="image-preview" alt="" />
                </div>
            </div>
           
            <div className="createPost__loggedInBottom">
            <div class ="createPost__imageUpload">
            <label htmlFor ="fileInput"><AddAPhotoIcon style = {{cursor:"pointer",fontSize :"20px"}}/>
            </label>
            <input id ="fileInput" 
            type ="file"
             accept ="image/*"
              onChange ={handleChange}/>
            </div>
            <button className = "createPost__uploadBtn" 
            onclick ={handleUpload} 
            style = {{color : caption ? "#000" : "lightgrey"}}>
                {`Upload ${progress !=0 ? progress: ""}`}
                </button>
            </div>
            </div>
            ) : (
                <div> 
                    <SignInBtn/>
                        <p style ={{marginLeft : "12px"}}> To post and Comment</p>
                </div> 
            )}

           
        </div>
    );
}
 

Проблема заключается в этой строке

 db.collection("posts").add

  
 

Я что-то упускаю?

Теперь дело в том, что я пытаюсь создать клон Instagram, но проблема в том, что все работает нормально, но есть проблема со строкой ниже, которая выдает ошибку, которая:

Необработанное отклонение (ошибка FirebaseError): Функция addDoc() вызывается с недопустимыми данными. Неподдерживаемое значение поля: не определено (найдено в поле profileUrl в сообщениях документа/K5KaPhmXmT2nCHmFZb2i)

Спасибо

Ваш загруженный документ содержит два photoUrl поля.

Один из которых задан с использованием user.photoUrl , который всегда будет undefined , потому что правильное имя свойства объекта Firebase User photoURL (обратите внимание на заглавные буквы). Также возможно, что это свойство не было задано вместе с изображением, поэтому вам следует обязательно проверить это, прежде чем пытаться сохранить его.