Не удается прочитать свойство setState неопределенного REACT - PullRequest
Новая
       12

Не удается прочитать свойство setState неопределенного REACT

0 голосов
/ 26 июня 2018

Я пытаюсь установить состояние моего компонента FileList, но получаю сообщение об ошибке

Необработанный отказ (TypeError): невозможно прочитать свойство 'setState' из неопределенного из строки 43 - this.setState ({список: записи});

Я связал функцию с этим, как это предлагалось в Интернете, кто-нибудь знает, как заставить это работать 

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

Ответы [ 3 ]

0 голосов
/ 26 июня 2018

Это проблема с ограничениями. Ваша функция обратного вызова не имеет доступа к this компонента. Вам нужно использовать .bind(this) или оператор со стрелкой (() => {}) для доступа к this в вашей функции

0 голосов
/ 26 июня 2018

Отчасти из-за того, что вы должны использовать функции стрелок, чтобы избежать потери текущего контекста, как уже сообщали другие пользователи, у вас есть другая ошибка, которая возникнет, как только вы исправите предыдущий.

вы вызываете setState внутри метода render, это создаст бесконечный цикл, чтобы избежать этого, просто поместите метод getList в componentDidMount hook

0 голосов
/ 26 июня 2018

Измените функции обратного вызова с помощью стрелок: 

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

У вас есть .bind для вашей основной функции, но внутри этой функции вы используете обычные функции обратного вызова для .then и forEach методов. Эти функции создают свои собственные области видимости, и вы теряете this. С помощью стрелок вы не потеряете область действия this.

Информация о бонусе: Вы также можете использовать функцию стрелки для функции getList. Таким образом вам не нужно будет связывать его в конструкторе.

...