无法读取未定义 REACT 的 setState 属性答案

【问题标题】：Cannot read property of setState of undefined REACT无法读取未定义 REACT 的 setState 属性
【发布时间】：2018-12-05 02:06:39
【问题描述】：

我正在尝试设置我的 FileList 组件的状态，但我不断收到错误消息

未处理的拒绝 (TypeError)：无法读取未定义的属性“setState” 从第 43 行开始 - this.setState({list: entries});

按照网上的建议，我已经将函数绑定到这个，有没有人知道如何让它工作

 export default class FileList extends Component {
  constructor(props) {
    super(props);
    this.getList = this.getList.bind(this);
    this.renderFiles = this.renderFiles.bind(this);
    this.state = {
    zipFile: props.zipFile,
    uploadPressed: props.uploadPressed,
    list: []
    }
  }

  getList() {
    var entries = new Array;
      let zip = new JSZip(); 
      JSZip.loadAsync(this.state.zipFile).then(function (zip) {
        zip.forEach(function (zipEntry) {
          if(zipEntry.split('/')[1] === "color"){
            if(zipEntry.endsWith('.png')) {
              entries.push(zipEntry.split('/').pop());
            } else if (zipEntry.endsWith('/')) {
            } else {
            }
          } else if(zipEntry.split('/')[1] === "mono") {
            if(zipEntry.endsWith('.png')) {
              entries.push(zipEntry.split('/').pop());
            } else if (zipEntry.endsWith('/')) {
            } else {
            }
          } else if(zipEntry.endsWith('.sslt')) {
          } else {
          }
        });
        alert(entries[0]);
        this.setState({list: entries});
      });
  }

  render() {
    return <div className="file-list">
              <div className="list-zip" >
                <div className="list-zip-name">
                  {this.state.zipFile.name}
                </div>
                <div className="list-zip-size">
                  {this.state.zipFile.size} Bytes
                </div>
                <div className="list-zip-x" >
                  <button className="x-button" onClick={close}>X</button>
                </div>
              </div>
              <hr className="hr"/>
            {this.renderFiles()}
          </div>
  }

  renderFiles() {
    if(this.state.uploadPressed === true) {
    this.getList();
    return <File fileName={this.state.list[0]} />
    }
  }
}

【问题讨论】：

标签： javascript html reactjs binding this

【解决方案1】：

您应该使用箭头函数来避免丢失当前上下文（正如其他用户已经报告的那样）的一部分原因是，您会遇到另一个错误，一旦您修复了前一个错误就会引发。

您在render 方法中调用setState，这将创建一个无限循环，为了避免它只需将getList 方法放入componentDidMount 钩子中

【讨论】：

很好，我错过了那个。但是，这不是一个答案，而是一个评论。或者你可以用第一个问题扩大你的答案，然后 OP 会接受你的答案。

【解决方案2】：

用箭头改变你的回调函数：

....
JSZip.loadAsync(this.state.zipFile).then( zip => {
zip.forEach( zipEntry => {
    if(zipEntry.split('/')[1] === "color"){
...

您的 main 函数有一个 .bind，但在此函数中，您正在为 .then 和 forEach 方法使用常规回调函数。这些函数创建了它们自己的作用域，而你正在失去this。使用箭头函数，您不会失去 this' 范围。

奖励信息：您也可以在 getList 函数中使用箭头函数。通过这种方式，您无需在构造函数中绑定它。

【讨论】：

【解决方案3】：

这是一个范围界定问题。您的回调函数无权访问组件的this。您需要使用 .bind(this) 或箭头运算符 (() => {}) 在函数中访问 this

【讨论】：