这是我创建类别 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
最佳答案
您使用没有内部子项的 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>
关于javascript - 类型错误 : children is not a function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62258014/