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字符串数组（工作）。他们被保存到状态（这也有效）。只有映射返回一个空数组。

这是一个小提琴https://jsfiddle.net/op69hbxm/3/