React 関数の中の順番について

Question

下記のコードでわからないところがあります。

const onMultiFileChange = (e) => {
    const files = e.target.files;
    var images = [];
    for (let i = 0; i < files.length; i++) {
      var file = files[i];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        images[i] = { preview: e.target.result, file: file };
        console.log(i);//後から
        console.log(images);　//後から
      };
      if (i === 3) break;
    }
    setState(Object.assign({}, state, { images: images }));
    console.log("end");//これがコンソールの頭に出てくる。
  }

上記のコードを実装すると"end"のもじが最初に出てきて、"後から"のところが先に出力されません。
原因がわかる方ご教授お願いします。

Answer 1

reader.onload =として関数をセットしていますが、これは非同期実行なので、外側の関数を抜けきってから実行されます。

Comments

[2_34_koki]

なるほど。そうだったのですね。ありがとうございます。