时间戳

首页 > 解决方案 > 在 FileReader 中发生事件后 React JS 没有改变状态

javascript - 在 FileReader 中发生事件后 React JS 没有改变状态

问题描述

我一直在尝试将通过输入标签在本地上传的 .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])} />

非常感谢

标签： javascriptreactjs

解决方案

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

this.setState({key:value})

但它不起作用，因为你的代码中的“this”是指向 fileReader 的链接——你需要 React。尝试使用箭头函数抛出正确的“this”：

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

推荐阅读