Fetchをループさせて値を配列に入れたい(React Native, Javascript)

Question

やりたい事

News APIとReact Nativeを使ってニュース記事などを表示させるアプリを作っています。
カテゴリーの一覧を表示するページで、カテゴリー名をタイトルにし、その下に3つ程度カテゴリーごとの記事を抽出して記載したいと考えています。
イメージはこのような形です。

【タイトル】
・記事１タイトル
・記事２タイトル
・記事３タイトル

それぞれReact Native ElementsのCardを用いて表現します。
1枚1枚のカードの表現は以下のように行っています。

  function singleCard(title,color,items) {

    return (
      <View style={{width:"50%"}}>
        <Card 
        title={title} 
        containerStyle={{borderColor:color,borderWidth:2 }}
        titleStyle={{color:color}}
        >
          <FlatList data={items} renderItem={({item}) => {
            <Text>{item.title}</Text>
          }} />
        </Card>
      </View>
    )
  }

そして上記の関数をもとに、カテゴリーすべてのカードを取得する関数を定義しています。

  function Cards()  {
    let element = []
    let topNews = []

    categories.map((data,i) => {

      var url = "https://newsapi.org/v2/top-headlines?"+'country=jp&'+'apiKey=(myapikey)&'+'category='+data +"&pageSize=3"
      var req = new Request(url);
      fetch(req).then((response) => response.json())
      .then((result) => (
        topNews.push(result.articles)
      ))
      .then(() => {
        const tmp = singleCard(data,colorList[i%7],topNews[i])
        element.push(tmp)
      })
    })
    return (
      element
    )
  }

やりたい事としては、

1. カテゴリーを一つずつ選択
2. カテゴリー名を使ってFetch
3. topNews[i]にjsonファイルを入れる
4. 先ほどのsingleCard関数でそれぞれのReactコンポーネントを生成
5. element変数に4で生成したコンポーネントをpushしていく

です。

なお、カテゴリーとカラーの配列は以下です。

  const categories = ["Business","Entertainment","General","Health","Science","Sports","Technology"]
  const colorList = ["#c23685","#d04255","#ffea2a","#3eba2b","#1daf9e","#208dc3","#c97fb4"]

エラー内容

上記ソースにて、returnしているelementが空配列**[]**になってしまいます。

Javascriptにあまり詳しくないので、どのような書き方をすれば適切に値を得られるのかわかっていません、、。
なのでご教授いただけると幸いです。

現在できていること

  function Cards()  {
    let element = []
    let topNews = []

    categories.map((data,i) => {
        const tmp = singleCard(data,colorList[i%7])
        element.push(tmp)
      })

    return (
      element
    )
  }

先ほどのFetch部分を除いた関数は、正常に動作しました。

追記

  return (
    <View style={{backgroundColor:"#f5f5f5",height:"100%",flexDirection:"row",flexWrap:"wrap"}}>
      {Cards()}
    </View>
  )
コード

エラー

Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.

Answer 1

原因としてはmapの中で非同期処理を繰り返しているわけですけれども、それぞれの非同期処理が完了(Promiseがresolve)されるのを待つことなくelementがreturnされているので、初期状態の空配列になっているのだと思います。要するに処理の順番の問題ですね。このへんはPromiseの知識が必要です。Promiseを使いつつも同期的に処理するためにAsync Functionで書いてみました。なお、不要と思われる変数などは削除しています。動作確認はしていないので、もし動かなかったらごめんなさい。

async function Cards()  {
    // cardsはPromiseの配列
    const cards = categories.map((data,i) => {

      const url = "https://newsapi.org/v2/top-headlines?"+'country=jp&'+'apiKey=(myapikey)&'+'category='+data +"&pageSize=3"
      const req = new Request(url)

      // Promiseを返却する
      return fetch(req)
        .then((response) => response.json())
        .then((result) => singleCard(data,colorList[i%7],result.articles))
    })

    // 全ての非同期処理が完了するまで待機する
    const element = await Promise.all(cards)

    return (
      element
    )
}

やっていることとしては、categoriesをmap処理してSingleCardのコンポーネントに解決されるPromiseの配列(cards)に変換しています。その後、await Promise.all(cards)とすることで、全てのPromiseが解決する(非同期処理が完了する)まで待機させ、その結果をreturnしています。こうすることでelementがreturnされるときには全ての非同期処理が完了していることが保証されます。

PromiseやAsync Functionなどについては以下の記事がわかりやすい(少し長いですが)ので、参考にしてみてください。
https://jsprimer.net/basic/async/

Comments

[howareyou1245]

早速のご回答ありがとうございます！
しっかりと返り値確認できました。

Reactを扱っていらっしゃるようなので恐縮ですがもう1点質問させていただきたいです。
コンポーネントのreturn部分を追記しました。
下に記したエラーが出てしまっているのですが、原因などお分かりになりますでしょうか。

[markey]

Cardsのreturn文を下のものに変えてみるとどうでしょうか？

```
return (
element
)
```

↓

```
return element
```

[howareyou1245]

変わりませんでした…。

[markey]

んーなんとなくわかりました。直接にコンポーネントの配列をrenderできないと思うので、cardsの返り値をmap処理させます。

```
return (
<View style={{backgroundColor:"#f5f5f5",height:"100%",flexDirection:"row",flexWrap:"wrap"}}>
{Cards().map((Card, index) => <Card key={index} />)}
</View>
)
```

[howareyou1245]

```
undefined is not a function (near '...Cards().map...')
```
となりました。

一応ですが、
```
function Cards() {
let element = []

categories.map((data,i) => {
const tmp = singleCard(data,colorList[i%7])
element.push(tmp)
})
return (
element
)
}
```
```
return (
<View style={{backgroundColor:"#f5f5f5",height:"100%",flexDirection:"row",flexWrap:"wrap"}}>
{Cards()}
</View>
)
```
ではrenderされて表示されます。
なのでCards()の返り値をいじればなんとななりそうなんですが、、

[markey]

すいません、CardsをAync Funcitonにしたことで、Cardsの返り値もPromiseになることを忘れていました。なので、Cardsの返り値を格納するStateを用意する(そして、Promiseが解決されたら結果をそのStateにsetする)などして、そちらのStateをrenderするようにすればOKだと思います。

[howareyou1245]

できました！
お手数おかけしました。