Javascript this.setState不是用于文件上载的函数

我知道这个问题已经被问过好几次了，但是我把答案看了一遍，却找不到解决问题的办法

我有一个非常基本的类组件，它只是加载一个外部HTML文件并读取其内容，但是出于某种原因，我得到了这个。setState在实际加载HTML后不是一个函数，我还不明白为什么

这是我的代码：-

import React from "react";

class ReadHtml extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            innerText: ''
        };
        this.handleFileSelect = this.handleFileSelect.bind(this);
      }


    handleFileSelect = (evt) => {
        evt.preventDefault();
        var file = evt.target.files[0]; // File inputs are an array - get the first element
        var reader = new FileReader();

        reader.onload = function(e) {
          // Render the supplied file
          document.getElementById('displayPage').innerHTML = e.target.result;
          this.setState({
              innerText: e.target.result
          });
        };

        // Read in the HTML file.
        reader.readAsText(file);
      };

    render() {
        return (
          <div>
            Select a file : <input type="file" onChange={(e) => this.handleFileSelect(e)} /><br/><br/>
            <div id="displayPage">Display the Html Page here</div>
          </div>
        )
      }

}

export default ReadHtml;

---

非常感谢您的帮助

存在范围问题，您可以尝试此代码。或者您可以绑定该函数

reader.onload = (e) =>{
      // Render the supplied file
      document.getElementById('displayPage').innerHTML = e.target.result;
      this.setState({
          innerText: e.target.result
      });
    };

---

存在范围问题，您可以尝试使用此代码。或者您可以绑定该函数

reader.onload = (e) =>{
      // Render the supplied file
      document.getElementById('displayPage').innerHTML = e.target.result;
      this.setState({
          innerText: e.target.result
      });
    };

---

您可以尝试使用以下方法更改handleFileSelect函数：

handleFileSelect=evt=>{ 预防违约； var file=evt.target.files[0]； var reader=新文件读取器； reader.onload=e=>{//更改 document.getElementById'displayPage'.innerHTML=e.target.result； 这是我的国家{ innerText:e.target.result }; }; //读入HTML文件。 reader.readAsTextfile； };

---

基本上，当您在这里创建新函数时，reader.onload=function，this绑定到此函数。使用箭头函数，这将保留在您的React类中

您可以尝试使用以下内容更改handleFileSelect函数：

handleFileSelect=evt=>{ 预防违约； var file=evt.target.files[0]； var reader=新文件读取器； reader.onload=e=>{//更改 document.getElementById'displayPage'.innerHTML=e.target.result； 这是我的国家{ innerText:e.target.result }; }; //读入HTML文件。 reader.readAsTextfile； }; 基本上，当您在这里创建新函数时，reader.onload=function，this绑定到此函数。使用arrow函数，这将保留在React类中