Javascript TypeError:子项不是函数

下面是我的创建类别javascript的代码。 我试图编辑onsubmtit函数。我试图让数据库从下面firebase javascript文件中的用户获取数据

import React, { Component } from 'react';
import Dropzone from 'react-dropzone';
export default  class CreateCategory extends Component {
    constructor(props) {
        super(props);
    }

    state = {
        category: '',
        image: null,
        imagePath: null,
    };

    onChange = (e) => this.setState({[e.target.name]: e.target.value});

    onSubmit = (e) => {
        e.preventDefault();

        const { category, image } = this.state;

        if(category && image) {
           this.props.firebase.category(`${Math.floor(Date.now() / 1000) + image.name}`).put(image).then(snapshot => {
                let self = this;
                snapshot.ref.getDownloadURL().then(function(downloadURL) {
                    //console.log("File available at", downloadURL);
                  return this.props.firebase.categories().push(
                        {
                            name: category,
                            image: downloadURL
                        })
                        .then(data => {
                            console.log(data);
                            self.props.history.push.categories();
                        })
                });
            });
        }else {
            alert('Field can not empty!');
        }
    }

    onDrop = (files, rejectedFiles) => {
        //console.log(files);
        this.setState({image: files[0]});
        const reader = new FileReader();

        reader.addEventListener("load", () => {
            this.setState({imagePath: reader.result});
        }, false);
        reader.readAsDataURL(files[0]);
    }


    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-lg-12">
                        <h1 className="page-header">
                            Create Category
                        </h1>
                        <ol className="breadcrumb">
                            <li className="active">
                                <i className="fa fa-dashboard"></i> Dashboard
                            </li>
                        </ol>
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-8">
                        <form onSubmit={this.onSubmit}>
                            <div className="form-group">
                                <label>Category Name</label>
                                <input className="form-control" onChange={this.onChange} name="category" />
                            </div>
                            <div className="form-group">
                                <label htmlFor="image">Category Image:</label>
                                <div className="row">
                                    <div className="col-md-6">
                                        <Dropzone onDrop={this.onDrop} accept='image/*' multiple={false}>Drop image here</Dropzone>
                                    </div>
                                    <div className="col-md-6">
                                        {
                                            this.state.image &&
                                            <img src={this.state.imagePath} width="320" height="240"/>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div className="form-group">
                                <input type="submit" className="btn btn-default" value="Create"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

我得到一个错误，它说

---

您使用的Dropzone组件没有内部子级。 请阅读文档

从“React”导入React
从“react Dropzone”导入Dropzone
console.log（acceptedFiles）}>
{（{getRootProps，getInputProps}）=>(
将一些文件拖放到此处，或单击以选择文件

)}

快速删除私钥您的代码不包含令牌

子项

任何位置。您似乎已发布敏感/私钥信息。请重置您的密码和/或撤销API密钥和令牌，因为这些密钥和令牌在发布到internet上时被视为已被泄露。

import app from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/storage"

var config = {
  // ...
};

class Firebase {
  constructor() {
    app.initializeApp(config);
    this.auth = app.auth();
    this.db = app.database();
    this.storage = app.storage();
  }

  //authentication API (contextAPI)

  doCreateUserWithEmailAndPassword = (email, password) =>
    this.auth.createUserWithEmailAndPassword(email, password);

  doSignInWithEmailAndPassword = (email, password) =>
    this.auth.signInWithEmailAndPassword(email, password);
  doSignOut = () => this.auth.signOut();

  doPasswordReset = (email) => this.auth.sendPasswordResetEmail(email);

  doPasswordUpdate = (password) =>
    this.auth.currentUser.updatePassword(password);

  //user API

  user = (uid) => this.db.ref(`users/${uid}`);

   users = () => this.db.ref("users");

   //Categories API
   category =() => this.storage.ref("categories/");

   categories = (cid) => this.db.ref(`categories/${cid}`);

   //Recipe API
   recipe = (rid) => this.db.ref(`categories/recipes/${rid}`);

   recipes = () => this.storage.ref("recipes/");

  //chat API
 chatRef = () => this.db.ref("general");
}

export default Firebase;