jsの配列から値を取得するとundefinedになる

Question

問題点

JavaScriptの配列からインデックスを指定して値を取得しようとすると、undefined が表示されてしまいます。

状況

下記画像の通り、配列に0番目の要素が入っているにも関わらず、 array[0] とすると undefined となっていまい。値を取得できません。

具体的なコードとしては、userIDs という配列から、firestoreを元にuserのデータを一つずつ取得し、detailUserData配列にpushします。その後、stateにsetし、0番目のインデックスを確認するとundefinedとなってしまいます。

const detailUserData: any[] = []; 
userIDs.forEach(userID => {
    const user = db.collection(path).doc(userID)
    user.get().then(v => {
        detailUserData.push(v.data())
    })
})
this.setState({
    users: detailUserData
})

console.log(this.state.users) // 0番目にデータは入っている
console.log(this.state.users[0]) // undefined

0番目の要素の取得方法を教えていただけますと幸いです。

Comments

[maisumakun]

どのようなコードを書きましたか？

[AkitoshiManabe]

> 配列に0番目の要素が入っているにも関わらず
それを証明するためにもコードは必要です。

[takasima20]

定義されていない変数を参照しているのでしょう
くらいしか分からんスよ。
まさか i[0] ってオチ?

Answer 1

setStateは非同期で行われますので、setStateした直後には値を取れないのが正解です。

おそらくconsole.log(this.state.users)は、コンソールを展開した瞬間の値が反映されて、揃っているように見えているだけかと思われます。

Comments

[Neemsk]

なるほど！
非同期処理だったのですね。
ご回答ありがとうございます。

[AkitoshiManabe]

https://ja.reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous