【React】頻発するエラーまとめ

導入

Reactで開発をする上で頻発するエラーをエラー文、エラーの意味、解決法をまとめました。
まだまだ少ないとは思いますが、気が向いたら追記いたします。

目次

1. フックの定義位置でのエラー
2. 置いたはずの要素がいない
3. Propsで渡したはずの変数がundefinedになる
4. 外部ファイルのインポートでエラーが起きる

フックの定義位置でのエラー

React Hook "useState" is called in function "<関数名>" 
that is neither a React function component nor a custom React Hook function.
React component names must start with an uppercase letter.
React Hook names must start with the word "use"

関数の内部でuseXxx系のフックを使用すると、発生するエラーです。

useStateやuseeffectをコンポーネントの関数(React function)内に移動し、propsとして、使いたい関数内に引き込んできましょう。

置いたはずの要素がいない

こちらはエラーが発生せず、ただ置いたはずの要素がいなくなるエラーです。以下にエラーが発生するようなサンプルを置きます。

return(
  <div>
  {arrays.map(value => {
    <div>{value}</div>
  })}
  </div>
)

これをすると、<div>{value}</div>の部分はレンダリングされない。map関数を使い内部の関数の即時関数で波括弧記法を使用すると、必ずreturnが必要になります。
したがって、以下のどちらかに統一しましょう。

修正案1

return(
  <div>
  {arrays.map(value => <div>{value}</div>)}
  </div>
)

修正案2

return(
  <div>
  {arrays.map(value => {
    return(<div>{value}</div>)
  })}
  </div>
)

Propsで渡したはずの変数がundefinedになる

親コンポーネントから子コンポーネントを使用する際に変数を渡す。
この時に受け取り方を間違えると思った通りの挙動をしない場合がある。

Objects are not valid as a React child (found: object with keys {<変数名>}).
If you meant to render a collection of children, use an array instead.

エラーの出るサンプル
Parent.jsx

<Childlen data = {data}/>

Childlen.jsx

export default function Childlen(data){
 return(
   <div>
     {data}
   </div>
 )
}

これだとdata変数がオブジェクトになっており、以下のようなdataが入れ子構造になってしまっている。

data{
  data:value
}

以下のように修正するとちゃんと描画される。
Childlen.jsx

export default function Childlen({data}){
 return(
   <div>
     {data}
   </div>
 )
}

外部ファイルのインポートでエラーが起きる

Can't resolve <ファイル名> in <ファイルのディレクトリ>

これはVSCode特有だと思われる。
他ファイルで定義しているクラスや関数を使うとき、tsのファイルをjsで使う際には上記のエラーが発生する。

この時はインポート文のファイルのディレクトリに.tsをつけるとインポートが成功する。

import {<モジュール名>} from '../../ファイル名>.ts'

終わりに

まだまだ少なくはありますが、私がよく頻発させるエラーについてまとめました。
追加するべきエラー等あれば、修正依頼や下のコメントよりお寄せいただければと思います。
ここまで読んでいいただきありがとうございました。