JavaScript Array Map 返回空数组

Question

我想要一个上传机制，上传图片并将它们转换成base64字符串，然后将它们保存到一个状态。之后，我想映射到一个组件中。但事实证明，在这种情况下 Array.map() 返回一个空数组。 array.map 有限制吗？

class TestFileInput extends React.Component {
  constructor(props){
        super(props);
    this.fileToBase64 = this.fileToBase64.bind(this);
    this.state = {
        examplePictures: undefined
    }
  }
  fileToBase64(files){
        let array = [];

        for(let i = 0; i < files.length; i++){
            let reader = new FileReader();
            let file = files[i];
            reader.onload = function(event) {
                // Push to array
                array.push(event.target.result)
            };
            reader.readAsDataURL(file);
        }
        //return array
        return array;
 }
  render() {
    console.log(this.state.examplePictures);
    return (
        <div>
          <input type="file" multiple onChange={(e) => {
            this.setState({
            examplePictures: this.fileToBase64(e.target.files)
          })
        }}/>
        {this.state.examplePictures !== undefined ? (
            <div>
              {this.state.examplePictures.map(pic => (
                <img src={pic} alt=""/>
                ))}
            </div>
        ):""}

      </div>
    );
  }
}

基本上，当您上传图片时。 fileToBase64 被调用，返回一个包含 base64 字符串的数组(可以使用)。他们被保存到国家(这也有效)。只有映射返回一个空数组。

这是一个 fiddle https://jsfiddle.net/op69hbxm/3/

Answer 1

我认为您错过了 FileReader 执行异步操作的事实。当您将 exemplePictures 添加到状态时，文件转换尚未完成。

我设置了一个codesandbox(https://codesandbox.io/s/clever-merkle-3qmwg)，我想它可以实现你想要的。

我做了两件事:

首先，我 promise fileReader 可以更轻松地操作它:

  readFileAsync = file => {
    return new Promise((resolve, reject) => {
      let reader = new FileReader();

      reader.onload = event => {
        resolve(event.target.result);
      };
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  };

我更新了 fileToBase64 函数以使用以前的函数，并等待每个文件在更新状态之前被读取:

  async fileToBase64(files) {
    const examplePictures = await Promise.all(
      Array.from(files).map(this.readFileAsync)
    );
    this.setState({ examplePictures });
  }

Array.from(files) 只是在这里将 FileList 转换为 Array，因此能够映射文件列表很容易`。