React HooksのuseEffectを用いた外部APIのJSONデータの取得

Question

useEffectでJSONデータの取得を試みていますが、

{
  "data": [
    {
      "id": "1",
      "name": "Sample"
    },
    {
      "id": "2",
      "name": "Sample2"
    },
  ]
}

上記の外部APIを取得するのに、

import React,{ useState,useEffect } from 'react';

function ApiFetch1(){

  const[state,setState] = useState([])

  const Fetch = () => {
    fetch('外部APIのURL')
    .then((response) => response.json())
    .then((data) => setState(data))
    }

  useEffect(() => {
    Fetch()
  },[])

  return(
    <>
     <div>
      {state.data.map((sample) => {
        <p key={sample.id}>
          {sample.id}
        </p>}
       )}
     </div>
    </>
  )
}

export default ApiFetch1;

と記述しましたが、
Expected an assignment or function call and instead saw an expression no-unused-expressions
Search for the keywords to learn more about each error.
というエラーが、<p key={sample.id}>の行に出てきてしまいます。

　　　<div>
      {state.data.map((sample) => {
        <p key={sample.id}>
          {sample.id}
        </p>}
       )}
     </div>

このstate.data.map辺りの書き方が違うことは分かったのですが、どう修正すればいいのか分かりません。どこを修正すればよろしいですか？

Comments

[maisumakun]

エラーはどの行に出ていますか？

[ylc]

書き忘れていました。

<p key={sample.id}>
の行に何度も出てしまいます

Answer 1

<p>をreturnしていないのが原因ではないでしょうか？

<div>
  {state.data.map((sample) => {
    return(
      <p key={sample.id}>
        {sample.id}
      </p>
    )
   })
  }
</div>

Comments

[ylc]

mapの書き方に問題がありそうなのでreturnは関係無さそうですねー

[maisumakun]

いえ、「JSXが書いてあるけど何にも使われていない」という話なので、まさしくこの問題です。

[ylc]

returnを追記したらコンパイルは成功するのですが、
TypeError: Cannot read property 'map' of undefinedと
やはりmapのエラーになってしまいます

[maisumakun]

それは別件です。こちらと両方対応する必要があります。

[nekoniki]

> TypeError: Cannot read property 'map' of undefinedと
> やはりmapのエラーになってしまいます
そのエラーが出ているのなら、state.dataがnullやundefiendなのだと思います。
※JSONの読み込みを待たずに描画しているようなので、おそらく初回の描画でエラーが出ているのだと思います。

state?.data?.mapにしてみてはどうでしょう？

[maisumakun]

データが取れるまではstate.dataはundefinedですので、そうなります。

「初期値として仮にエラーにならないデータを入れておく」、あるいは「state.dataがundefinedになりうることを前提にコードを書く」のどちらかで対応する必要があります。

[ylc]

回答して頂いたお二人方どうもありがとうございました。

[ylc]

「初期値として仮にエラーにならないデータを入れておく」
「state.dataがundefinedになりうることを前提にコードを書く」
の対処法を自分で考えてみたのですが思い浮かびません。

具体的な方法をよければ教えていただいてもよろしいですか？

[ylc]

解決出来ました。

Answer 2

解決出来たので大丈夫です。