首页 > 解决方案 > React JSX JSZip - var 范围不正确

问题描述

我正在尝试打开一个 zip 文件,从中获取某些元素,将它们推送到一个数组中,然后使用该数组在 react 中呈现组件列表。我遇到的问题是我在这个 for 循环中对 nameArray 所做的任何事情都无法在它之外被识别。

isUploadPressed(props) {
if(props === true) {
  let zip = new JSZip(); 

  JSZip.loadAsync(this.state.zipFile).then(function (zip) {
    var listOfFiles;

    for (let zipEntry of Array.from(zip)) {
      var nameArray = new Array;
      nameArray.push(zipEntry.split('/').pop());
    }
    alert("NameArray: " + nameArray.pop());
    nameArray.map((element) => listOfFiles.push(<li><File fileName={element}/></li>)) 
    return listOfFiles;
  });

}

}

未处理的拒绝(TypeError):无法读取未定义的属性“pop”

标签: javascriptreactjsvariablesscope

解决方案


您应该声明循环的var nameArray = new Array;外部,for以便您可以调用变量。

isUploadPressed(props) {
if(props === true) {
  let zip = new JSZip(); 

  JSZip.loadAsync(this.state.zipFile).then(function (zip) {
    var listOfFiles;
    var nameArray = new Array;

    for (let zipEntry of Array.from(zip)) {
      nameArray.push(zipEntry.split('/').pop());
    }

    alert("NameArray: " + nameArray.pop()); // Now you should be able to call nameArray properly
    nameArray.map((element) => listOfFiles.push(<li><File fileName={element}/></li>)) 
    return listOfFiles;
  });

}

我建议您在这里阅读并了解更多关于范围的信息:JavaScript 中变量的范围是什么?


推荐阅读