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

Question

 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]} />
    }
  }
}

Answer 1

用箭头更改回调函数：

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

主函数有.bind，但是在这个函数中，对.then和foreach方法使用常规回调函数。这些函数创建了它们自己的作用域，您正在丢失这个。使用箭头函数，您不会松散这个'作用域。

额外的信息：你可以使用一个箭头函数为你的getList函数也。通过这种方式，您将不需要在构造函数中绑定它。