useStateに配列を入れたい＆それをfor文を組み合わせて実現したいです

Question

以下のコードのどこを修正すれば、希望通りの配列データが作れるでしょうか？

＜現状＞
newScoresが
[1][2][3][4][5][6][7][8]][9]...という感じになってしまってます...

＜希望＞
newScoresを
[1,2,3,4,5,7,8,9]という感じに一つの配列にしたいです！

import firebase from "../../firebase";
import { useState, useEffect } from "react";


const RealTimeScore = () => {
  const [newScores, setNewScores] = useState([]);

  useEffect(() => {
    const db = firebase.firestore();
    

    db.collection("users")
      .get()
      .then((snap) => {
     

        console.log(snap.docs.length);
                //ここは67

        for (let index = 0; index < snap.docs.length; index++) {
          const scores = snap.docs[index].data().score;

          setNewScores([...newScores, scores]);
        }
      });
  }, []);

  {console.log(newScores)}

このnewScoresの結果を[1,2,3,4,5,7,8,9]という感じに一つの配列にしたいです！
現状は、[1][2][3][4][5][6][7][8]][9]...という感じになってしまってます...

＜補足情報＞
以下の値は、配列ではなく、単体の数値です。

console.log(snap.docs[0].data().score);

//この値は「12」配列ではなく、一つの数値が入ってます
上記以外も、

docs[n].data.score()

は全て、単体の数値が入ります。
これらを、配列にしたい感じです！

お手数ですが、わかる方。お力添えいただければ幸いです。

Answer 1

for ループの中で setNewScores([...newScores, scores]); して newScores に追加しているつもりだと思いますが、useState の setter で値を更新しても即時 state に反映されるわけではない のでうまくいきません。

for ループを使うなら次のようにすると良いでしょう。

    const scores = [];
    for (let index = 0; index < snap.docs.length; index++) {
      scores.push(snap.docs[index].data().score);
    }
    setNewScores(scores);

または、map を使って一行で書くこともできます。

    setNewScores(snap.docs.map(doc => doc.data().score));

Comments

[ssasq]

ご丁寧な回答ありがとうございました！処理、両方とも試してみて希望通りの動きが実現できました！とても助かりました????‍♂️