Question

我正在尝试设置FileList组件的状态，但是我一直收到错误

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

正如在线建议的那样，我已经将此功能绑定到此了，没有人知道如何使此功能起作用

 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方法使用常规的回调函数。这些函数创建了自己的作用域，您正在失去this。使用箭头功能，您将不会失去this'的范围。

奖金信息：您也可以将箭头功能用于getList函数。这样，您就无需将其绑定到构造函数中。

Answer 2

您应该使用箭头功能来避免失去其他用户已经报告的当前上下文这一事实的一部分，您还有另一个错误会在修复前一个错误后立即出现。

您要在setState方法内调用render，这将创建一个无限循环，以避免将其仅将getList方法放在componentDidMount钩子内

Answer 3

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

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

3 个答案: