javascript - 在 FileReader 中的事件发生后，React JS 不会改变状态

Question

我一直在尝试将通过输入标签在本地上传的 .txt 文件的内容指定为状态。我使用了文件阅读器，但是虽然打印了文件的内容，但根据 React 开发工具，状态并没有改变。

这是代码:

handleFile = (file) => {
var fileReader = new FileReader()
fileReader.readAsText(file)
fileReader.onloadend = function (e) {
  var content = e.target.result
  console.log(content)
  this.setState={
    text: content
  }

}

函数 handleFile 在这里被调用:

<input type="file" accept='.txt' className="custom-file-input" id="customFile"
onChange={e => this.handleFile(e.target.files[0])} />

非常感谢

Answer 1

setState 是一种方法，因此要使用它，您应该键入以下内容:

this.setState({key:value})

但这行不通，因为代码中的“this”是指向 fileReader 的链接 - 而您需要 React。尝试使用箭头函数抛出正确的“this”:

fileReader.onloadend = (e)=> {
var content = e.target.result
console.log(content)
this.setState({
  text: content
})
}