配列にmap()が実行できない

Question

前提・実現したいこと

複数のオブジェクトを格納した配列にmap()を利用して処理を加えたいと思っています。

発生している問題・エラーメッセージ

エラーは発生していませんが、usersではmap()が実行され、props.userでは実行されません。

該当のソースコード

usersには下記メソッドの返り値が格納されています。

const users = [
      {
        first: "Ada",
        last: "Lovelace",
        born: 1815
      },
      {
        first: "Ada",
        last: "Lovelace",
        born: 1815
      },
    ];

props.userには下記メソッドの返り値が格納されています。

const DataGetAction = () => {
  let users = [];

  firebaseDb.collection("users").get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
          users.push(doc.data());
      });
  });

  return users;
}

試したこと

配列宣言の[]をnew array()とするなど

補足情報（FW/ツールのバージョンなど）

firebaseからデータの一覧を取得して表示することが最終の目標です。

よろしくお願いいたしますm(_ _)m

Comments

[HayatoKamono]

１つ目の画像を見ると、props.usersは[]と空の配列になっているようですが、２つ目の画像を見ると、props.usersは幾つかのオブジェクトを持った配列になっているようです。どちらが質問の前提でしょうか？

[HayatoKamono]

「props.userでは実行されません。」をもう少し具体的に説明して、質問文に追記して下さい。
また、mapメソッドを使っている該当コードを追記するとよろしいかと思います。

[HayatoKamono]

> props.userでは実行されません。
props.usersですか？それとも、props.userですか？添付画像ではprops.usersですが。

[defghi1977]

回答するのに必要となる情報が欠けています. 質問の内容を見直し, もう少し丁寧に説明願います.

Answer 1

firebaseDb.collection("users").get().then(~)

となっているように、Firebaseからのデータ取得は、非同期で行われますので、

const DataGetAction = () => {
  let users = [];

  firebaseDb.collection("users").get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
          users.push(doc.data());
      });
  });

  return users;
}

は常に、を返します。

データ取得したものを返したい場合は、

const DataGetAction = () => {
  return firebaseDb.collection('users').get().then(querySnapshot => {
    return querySnapshot.map(doc => doc.data());
  });
}

と、Promiseを返すようにDataGetActionを修正し、DataGetAction実行側では

DataGetAction().then(users => {
  users.map(~);
});

として、(Promise).then()で結果を受け取るように修正する。

もしくは、async/awaitで

const DataGetAction = async () => {
  const querySnapshot = await firebaseDb.collection('users').get();
  return querySnapshot.map(doc => doc.data());
}

とし、DataGetAction実行側は実行するコードが含まれる関数にasyncをつけて

async function exec() {
  const users = await DataGetAction();
  users.map(~);
}

とすればいいのではないでしょうか？(未検証)

Answer 2

添付画像が１つのように見えますが、実際は２つに別れているのですよね？

１つ目の画像を見ると、props.usersは[]と空の配列になっているようですが、２つ目の画像を見ると、props.usersは幾つかのオブジェクトを持った配列になっているようです。

おそらく、動かないと言っているのは空の配列に対して、mapメソッドを実行しているからではないでしょうか？

const DataGetAction = () => {
  let users = [];

  firebaseDb.collection("users").get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
          users.push(doc.data());
      });
  });

  return users;
}

実際、このコードではfirebase絡みのところが非同期実行されている訳なので、空の配列が返るだけだと思います。

このコードを動くようにする為には、もっと広範囲のコードを質問文に追記して質問をする必要があるかと思います。（コンポーネントのレンダー部分だけではなく、各ライフサイクルメソッドの部分も含む。コンポーネント全体のコードが好ましい。ただし、実際のコードをそのまま載せることが出来ない場合は、簡略化するなり、変数名などを他のそれらしい名前に変えるなど適宜必要に応じてということで。）

Answer 3

いまいち何をやったのかわかりません
propsがオブジェクトでその子要素usersが配列なら
普通にmapできませんか？

var props={}
props.users=[
  {
  first: "Ada",
  last: "Lovelace",
  born: 1815
  },
  {
  first: "Ada",
  last: "Lovelace",
  born: 1815
  },
  ];

console.log(props.users.map(function(x){return x.born;}));