我应该怎么办？如何将图像上传到 Storage 和 addDoc() 到 FireStore

如何解决我应该怎么办？如何将图像上传到 Storage 和 addDoc() 到 FireStore

我正在创建一个在 React 和 Firebase 上上传图片的 bbs。 错误描述

×FirebaseError：使用无效数据调用函数 addDoc()。不支持的字段值：未定义（在文档项目/D3mEql42XZBZhVFZ4E0x 中的字段 authorUserName 中找到）

访问项目组件后总是以某种方式删除身份验证数据。 所以不能在firestore中添加Doc。我觉得

CrateProject = 用户可以编写标题和内容。还有上传功能。上传图片功能与 redux-action 隔离。上传图片后。它将 imageURL 放在项目的道具中。

验证数据

//project 就是一个帖子

创建项目

class CreateProject extends Component {
    state = {
        title:'',content:'',uploadfile:'',imageUrl:'',}

    handleChange = (e) =>{
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    handleSubmit = (e) =>{
        e.preventDefault();
        this.setState({ uploadfile: null});
        this.props.createProject(this.state);
        this.props.history.push('/');
    }

    onDrop = acceptedFiles => {
      if (acceptedFiles.length > 0) {
        this.setState({ uploadfile: acceptedFiles[0] })
      }
    }
  
    handleSubmitImg = (e) =>{
      e.preventDefault()
      //this.props.sampleteFunction()
    };

    parseFile　= (file) =>{
      const updatedFile = new Blob([file],{ type: file.type });
      updatedFile.name = file.name;
      return updatedFile;
    }



    onSubmit = (event) => {
      event.preventDefault();
      var updatedFile = this.state.uploadfile;
      console.log("aaaaaaaaaaaa"+updatedFile)

      const uploadTask = storage.ref(`/images/${updatedFile.name}`).put(updatedFile);
      uploadTask.on(
        firebase.storage.TaskEvent.STATE_CHANGED,this.next,this.error,this.complete
      );
    };
    next = snapshot => {
      const percent = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log(percent + "% done");
      console.log(snapshot);
    };
    complete = () => {
      var updatedFile = this.state.uploadfile
      storage
        .ref("images")
        .child(updatedFile.name)
        .getDownloadURL()
        .then(fireBaseUrl => {
          console.log("imageURL"+fireBaseUrl)
          this.setState({ imageUrl: fireBaseUrl })
          //this.state.setImageUrl(fireBaseUrl);
        });
    };

  
    
  render() {
   const maxSize = 3 * 1024 * 1024;

    const {auth} = this.props

    console.log("UP"+this.state.uploadfile  );
    if(!auth.uid) return <Redirect to="/signin" />
    return (
      <Dropzone
      onDrop={this.onDrop}
      accept="image/png,image/jpeg,image/gif,image/jpg"
      inputContent={(files,extra) => (extra.reject ? 'Image files only' : 'Drag Files')}
      styles={dropzoneStyle}
      minSize={1}
      maxSize={maxSize}
    >
      {({ getRootProps,getInputProps }) => (

      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">
                Create Project
            </h5>
            <div className="input-field">
                <label htmlFor="title">Title</label>
                <input type="text" id="title" onChange={this.handleChange}/>
            </div>

            <div className="input-field">
                <label htmlFor="content">Project Content</label>
                <textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
            </div>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">Create</button>
            </div>
        </form>
            <div {...getRootProps()}>
                <input {...getInputProps()} />
                
                {this.state.uploadfile ? <p>Selected file: {this.state.uploadfile.name}</p> : null}
                
                {this.state.uploadfile ? (<Thumb key={0} file={this.state.uploadfile } />) :null}
            </div>
            <form onSubmit={this.onSubmit}>
           <button>Upload</button>
          </form>
 
      </div>
  )}
</Dropzone>
    )
  }
}

const matchStateToProps = (state) => {
    return{
        auth: state.firebase.auth
    }
}

const mapDispatchToProps = (dispatch) => {
    return{
        createProject: (project) => dispatch(createProject(project))
    }
}

export default connect(matchStateToProps,mapDispatchToProps)(CreateProject)

Action.js

export const createProject = (project) => {

    return (dispatch,getState,{ getFirebase,getFirestore }) => {
     
      // make async call to database
        const firestore = getFirestore();　
        const profile = getState().firebase.profile;
        const authorId = getState().firebase.auth.uid;
        console.log("profile"+JSON.stringify(profile));
        firestore.collection('projects').add({
            ...project,authorUserName: profile.userName,authorId: authorId,createdAt: new Date()
        }).then(() => {
            dispatch({ type: 'CREATE_PROJECT',project})
        }).catch((err) => {
            dispatch({ type: 'CREATE_PROJECT_ERROR',err })
        })
    }
};