Javascript onload函数只显示一个结果（我认为是列表中的最后一项）x次数

我正在尝试添加一个链接，指向使用

fileList.push（{name:name}）获得的列表中的每个项目

我的问题是当我尝试使用
fileList.push（{link:href}）在onload函数中添加addthelink时它只从一个文件（我相信是最后一个文件）中获取结果


这是我的密码：

class Download extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);

    this.inputRef = React.createRef();

    this.state = {
      files: []
    };
  }

  handleClick = event => {

     const self = this;

     let file, name, href;

     let breh = event.target;

     const fileList = [];




      for (let x = 0, xlen = breh.files.length; x < xlen; x++) {


        file = breh.files[x];
        name = file.name;

        fileList.push({name:name});
        let reader = new FileReader();

        reader.onload = e => {
        href = e.target.result;
        fileList.push({link:href});
    };








        reader.readAsDataURL(file)

      }

      self.setState({ files: fileList });
  };

  render() {
     console.log(this.state);
    return (
      <div className="input">
        <input
          onChange={this.handleClick}
          id="upload-file"
          className="inputName"
          type="file"
          multiple
          ref={this.inputRef}
        />
        <div>
          <ul ref={this.ulRef}>
            {this.state.files.map((file, index) => (
              <li key={index}>
                <Link to={file.link}>{file.name}</Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

export default Download;

类下载扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
this.inputRef=React.createRef（）；
此.state={
文件：[]
};
}
handleClick=事件=>{
const self=这个；
let文件、名称、href；
设breh=event.target；
常量文件列表=[]；
for（设x=0，xlen=breh.files.length；x{
href=e.target.result；
push（{link:href}）；
};
reader.readAsDataURL（文件）
}
setState（{files:fileList}）；
};
render（）{
console.log（this.state）；
返回(

{this.state.files.map（（文件，索引）=>(

{file.name}

))}

);
}
}
导出默认下载；
您的代码中存在多个问题。主要问题是，您正在循环之外使用文件读取器，因此它将只是最后一个文件。另一个问题是在何处声明变量以及如何设置状态

您希望使用承诺（或等待）

使用承诺的解决方案如下所示：


//使其成为一个函数，因此它可以在snipplet中运行，而无需响应。
//这些内容在react组件中可以正常工作
handleClick=事件=>{
//读取文件并返回承诺的帮助程序代码
常量读取文件=（文件）=>{
const fileReader=new fileReader（）
//创造承诺并回报它
返回新承诺（（解决、拒绝）=>{
//如果文件读取器有错误，请报告它
fileReader.onerror=（错误）=>{
拒绝（{error}）
}
//如果成功了，就要兑现承诺
fileReader.onload=（）=>{
决心({
name:file.name，
链接：fileReader.result
})
}
//开始读取文件
readAsText（文件）；
})
}
//创建所有文件读取器承诺
//从文件列表创建一个数组，并使用映射生成
//一系列承诺
const allReaders=Array.from（event.target.files）.map（readFile）
//现在处理我们刚刚创建的一系列承诺
承诺。所有（所有读者）
。然后（文件列表=>{
console.log（文件列表）
//设置我们拥有所有文件的状态
//this.setState（{files:fileList}）；
})
.catch（错误=>{
控制台错误（错误）
});
}
//仅用于无反应的可运行示例
document.querySelector（“输入”）.addEventListener（“更改”，handleClick）
您一直在使用相同的变量。移动
let文件，名称，href
在循环中与
reader.readAsDataURL（文件）
一起出现的另一个问题是，您正在异步调用完成之前设置状态。如果可以，之后如何设置？当我在onload函数中添加setState时，它只会为显示相同信息的每个项目打印一个数组。我不知道还能把这个密码放在哪里。这不是一个工作文件，但这是我的js文件的正确代码吗。如果是这样的话，这就是我得到的结果，即使它仍然正确地显示列表项：从上面的
handleClick
函数中复制内容，并将其粘贴到你的handleClick方法中……嘿，我认为它每次都给我一个不同的链接，这很好，但功能很慢，当我单击一个链接时（我把它变成了一个hrefs）它将我带到一个空白页面，并向我显示：blank#在地址栏中被阻止。速度会很慢，因为它是异步调用。你可以用每个承诺更新状态，但它会慢慢增长。我会添加一个加载图标，直到加载为止。好吧，我想现在还可以。你知道为什么它会将我带到一个带有地址栏中的“about:blank#blocked”。我想让它打开并播放音频。