ESLintに指摘された"Array.prototype.map() expects a return value from arrow function array-callback-return"を解決する

はじめに

reactでuseStateを使用して連想配列を追加したり削除、更新する記述が多々あります。
実装をしてしばらくしてからログをみると、下記の指摘内容が表示されていました。

"Array.prototype.map() expects a return value from arrow function  array-callback-return"

初めてみる指摘内容だったので調べたこと、修正内容を備忘録として残そうと思います。

指摘された状況と似た例

自分が指摘された状況と似ている例を作りました。
下記の様に、作成したuseStateの連想配列(worldFoods)に別の配列(JapaneseFoods)の値を入れたいという状況です。
そして、JapaneseFoods.mapの箇所が指摘されてしまいました。

const JapaneseFoods = [
   {name: soba, place: kyoto},
   {name: takoyaki, place: dotonbori},
   {name: sushi, plce: ginza}
]

const [worldFoods, setWorldFoods] = useState([{
    name: "",
    place: ""
  }])

//"JapaneseFoods.map"の箇所で指摘された
JapaneseFoods.map((JapaneseFood) => {
        setWorldFoods(worldFood => [...worldFood,{
          name: JapaneseFood.name,
          place: JapaneseFood.place
        }])
      })

なぜ"JapaneseFoods.map"の箇所が指摘されたのか

これはmapメソッドの本来の使用方法と少しづれていることが原因で指摘されていたようです。
下記の公式ドキュメントには下記のように説明されています。

返値
与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列です。

mapメソッドは返値を準備していますが、僕が書いたコードだと、「JapaneseFoodsの値を繰り返して、worldFoodsの配列に格納している」だけなので、返値を使うタイミングはありません。

そのため「mapメソッドを使っているんだから、配列を返値として作成されてるけど使ってないよね？使わないの？」とesLintが指摘しているのですね。

指摘内容を修正

ではどの様に修正すれば警告はなくなるのかというと、forEachメソッドを使用することです。
forEachメソッドはmapメソッドと同じ様に与えられた配列の要素を繰り返すという点では同じですが、下記の公式ドキュメントに書いてある通り返値がありません。

返値
undefined です。

そのため、使用されない配列が無駄に作成されることもなく、警告を解消することができました。

終わりに

似たメソッドがどんな違いがあるのかを理解して、なぜこのメソッドを使ったのかを説明できるエンジニアになれるように日々勉強頑張ります。

参考