React-Axios：TypeError：无法读取未定义的属性"setState"

Question

https://bezkoder.com/react-file-upload-axios/

我在React Axios上学习了这个文件上传教程，但遇到了一个非常普遍的错误，我似乎无法调试。我是个新手。感谢任何帮助(：

TypeError: Cannot read property 'setState' of undefined selectFile
http://localhost:29080/static/js/main.chunk.js:27395:10
27392 | }
27393 | 
27394 | selectFile(event) {
> 27395 |   this.setState({
|        ^  27396 |     selectedFiles: event.target.files
27397 |   });
27398 | }
View source

下面是反应组分。我在教程中遵循的代码完全相同。错误发生在我上传PNG文件时点击上传按钮之后

export default class FileUpload extends Component {
constructor(props) {
super(props);
this.state = {
selectedFiles: undefined,
currentFile: undefined,
progress: 0,
message: "",
fileInfos: [],
};
}

selectFile(event) {
this.setState({selectedFiles: event.target.files,});
}
upload() {
let currentFile = this.state.selectedFiles[0];
this.setState({
progress: 0,
currentFile: currentFile,
});
UploadService.upload(currentFile, (event) => {
this.setState({
progress: Math.round((100 * event.loaded) / event.total),
});
})
.then((response) => {
this.setState({
message: response.data.message,
});
return UploadService.getFiles();
})
.then((files) => {
this.setState({
fileInfos: files.data,
});
})
.catch(() => {
this.setState({
progress: 0,
message: "Could not upload the file!",
currentFile: undefined,
});
});
this.setState({
selectedFiles: undefined,
});
}

componentDidMount() {
UploadService.getFiles().then((response) => {
this.setState({
fileInfos: this.response.data,
});
});
}

render() {
const {
selectedFiles,
currentFile,
progress,
message,
fileInfos,
} = this.state;
return (
<div>
{currentFile && (
<div className="progress">
<div
className="progress-bar progress-bar-info progress-bar-striped"
role="progressbar"
aria-valuenow={progress}
aria-valuemin="0"
aria-valuemax="100"
style={{ width: progress + "%" }}
>
{progress}%
</div>
</div>
)}
<label className="btn btn-default">
<input type="file" onChange={this.selectFile} />
</label>
<button className="btn btn-success"
disabled={!selectedFiles}

onClick={() => this.currentFile()}
>
Upload
</button>
<div className="alert alert-light" role="alert">
{message}
</div>
<div className="card">
<div className="card-header">List of Files</div>
<ul className="list-group list-group-flush">
{fileInfos &&
fileInfos.map((file, index) => (
<li className="list-group-item" key={index}>
<a href={file.url}>{file.name}</a>
</li>
))}
</ul>
</div>
</div>
);
}
}

Answer 1

在声明this.state后，需要在constructor中添加this.selectFile = this.selectFile.bind(this)

Answer 2

问题：您的状态更新函数selectFile认为this指的是自己。

修复：之前@viet强制绑定的答案应该有效。

另一个解决方案：将onChange属性作为闭包，而不是传递函数句柄，应该可以修复this。

onChange={(event) => this.selectFile(event)}

---

IMP：为什么？：这之所以有效，是因为您可以将(event) => this.selectFile(event)视为在渲染上下文中进行评估，也就是说，就好像它在渲染fn中定义的位置执行一样。在这种情况下，this指的是Component对象。

祝reactJS好运！