javascript - 类型错误 : children is not a function

Question

这是我创建类别 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>
        )
    }
}

这是我的 firbase javascript 代码

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;

我收到一个错误提示 Children is not a function

Answer 1

您使用没有内部子项的 Dropzone 组件。请阅读文档 github.com/react-dropzone

import React from 'react'
import Dropzone from 'react-dropzone'

<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>