如何解决无法读取 React 状态下未定义的属性“名称”
我正在尝试制作一个将图像上传到 firebase 存储的组件。 但是在 onsubmit 函数中发生以下错误。 可以加载 render() 中的 {this.state.uploadfile.name}。
我该如何解决?
class CreateProject extends Component {
state = {
title:'',content:'',uploadfile:'',setimageUrl:'',}
handleChange = (e) =>{
this.setState({
[e.target.id]: e.target.value
})
}
handleSubmit = (e) =>{
e.preventDefault();
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.updatedFile;
if (updatedFile === "") {
console.log("File is not chosen");
}
console.log("aaaaaaaaaaaa"+updatedFile)
const uploadTask = storage.ref(`/images/${this.state.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);
};
error = error => {
console.log(error);
};
complete = () => {
var updatedFile = this.state.updatedFile
// get image-URL after Uoloding
storage
.ref("images")
.child(updatedFile.name)
.getDownloadURL()
.then(fireBaseUrl => {
this.setState({ setimageUrl: fireBaseUrl })
});
};
render() {
const maxSize = 3 * 1024 * 1024;
const dropzonestyle = {
}
const {auth} = this.props
console.log("UP"+this.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()} />
<p>Drop</p>
{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>
)
}
}
解决方法
您在 uploadfile:'',
中使用了 state
并且您正在尝试访问 updatedFile
中的 onSubmit
修改
var updatedFile = this.state.updatedFile;
与
var updatedFile = this.state.uploadfile;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。