ここまでで、state・イベント・一覧がそろいました。Reactでエラーが出る材料も、ちょうど出そろったということです。
この回は新しい機能を作りません。出たエラーを自分で直せるようにするための回です。
エラーは3か所に出る
まず、どこを見ればいいのかを決めておきます。
| 場所 | 何が出るか |
|---|---|
| ブラウザの赤い画面（Viteのオーバーレイ） | 書き方の間違い（構文エラー）。ファイル名と行番号つき |
| ブラウザのコンソール | 動かしてみて初めて分かるエラー・警告 |
ターミナル（npm run devを動かしている画面） | ビルド側のエラー。オーバーレイと同じ内容が多い |
上から順に見るのが早道です。赤い画面が出ているなら、コンソールを見る前にそこを読んでください。
</p>を書き忘れたときの画面。「どのファイルの何行目か」「何を期待していたか」が全部書いてありますこの画面は書いてあるとおりに直せば直ります。上の例なら「src/App.jsxの80行目、<p>に対応する閉じタグが無い」です。
よく出るエラー5つ
①Objects are not valid as a React child
オブジェクトをそのまま画面に出そうとしたときのエラーです。
{bird} {/* ✕ オブジェクトごと出そうとしている */}
{bird.name} {/* ○ 中の値を指定する */}{}の中に入れていいのは文字列・数値・JSX・その配列だけです。オブジェクトの中身を確認したいときは、いったんconsole.log(bird)で見るか、{JSON.stringify(bird)}で文字列にします。
②Cannot read properties of undefined (reading 'map')
まだ届いていないデータに対してmapを呼んだときに出ます。useEffectで読みこむ前の一瞬に起きがちです。
const [birds, setBirds] = useState() // ✕ 初期値がない = undefined
const [birds, setBirds] = useState([]) // ○ 空の配列から始める配列のstateは必ず[]から始める——これだけでほとんど防げます。読みこみ中の表示（isLoading）を出すのも同じ理由です。
③Each child in a list should have a unique "key" prop
一覧にkeyが無いという警告です。画面は出るので放置しがちですが、並べかえや削除をしたときに状態が別の行へ移る原因になります。
{birds.map((bird) => <BirdCard key={bird.id} bird={bird} />)}keyが何をしているのか、なぜindexではだめなのかはこの回に④Too many re-renders
描画のたびに状態を更新していて、止まらなくなっています。 原因はたいてい2つです。
<button onClick={handleClick()}> {/* ✕ 描画時に実行されてしまう */}
<button onClick={handleClick}> {/* ○ 関数を渡す */}useEffect(() => { setCount(count + 1) }) {/* ✕ 依存配列がない */}
useEffect(() => { setCount(count + 1) }, []) {/* ○ 最初の1回だけ */}⑤Rendered more hooks than during the previous render
Hooksを呼ぶ場所のルールを破っています。 ifの中や早期returnより後ろにuseState・useEffectを置くと出ます。
if (!bird) return null
const [liked, setLiked] = useState(false) // ✕ returnより後ろHooksはコンポーネントの先頭にまとめて書く。 これだけです。
エラーが出ないのに動かないとき
いちばん困るのがこれです。順番に確かめます。
- そもそも呼ばれているか——処理の1行目に
console.log('ここまで来た')を置く - 値は思ったとおりか——
console.log(keyword, shownBirds.length)のように複数まとめて出す - 画面とデータがずれていないか——次のReact DevToolsで見る
React DevToolsでpropsとstateを見る
console.logを挟まなくても、いまのpropsとstateをそのまま見られる道具があります。React公式が配っているブラウザの拡張機能です。
入れると開発者ツールにComponentsとProfilerの2つのタブが増えます。使うのはほぼComponentsだけです。
- 左にコンポーネントの木（
App→BirdCard…）が出る - 部品を選ぶと、右にpropsとhooks（state）の中身が出る
- 値はその場で書きかえて試せる
「propsが渡っていないのか、渡っているけど表示が間違っているのか」が一目で分かるので、切り分けの時間が激減します。
ja.react.dev外部サイトReact Developer Tools – React公式の案内ページ。Chrome・Firefox・Edgeの拡張機能へのリンクがまとまっていますべんりワザ開発者ツールの使い方入門ブラウザの開発者ツール自体の使い方（要素の確認・コンソール・ネットワーク）はこちら直すときの順番
最後に、詰まったときの手順をまとめておきます。
- 赤い画面が出ていたら、そこだけ読む（ファイル名と行番号がある）
- コンソールの一番上のエラーを読む（下のほうは巻き添えのことが多い）
- エラー文をそのまま検索する（自分のファイル名や変数名は消して検索する）
- 直前に書いた数行を消してみる（動けば、その数行が原因）
- React DevToolsでpropsとstateを見る
このレッスンのまとめ
- エラーは赤い画面 → コンソール → ターミナルの順に見る
- 英語は全部読まない。何が・どうなっている・どこでの3つだけ拾う
Objects are not valid…はオブジェクトをそのまま出したときCannot read properties of undefinedは配列stateの初期値[]忘れが定番Too many re-rendersは括弧つきで渡したか依存配列忘れRendered more hooks…はHooksを先頭に書いていない- React DevToolsでpropsとstateを直接見ると、切り分けが一気に速くなる
次の章からは、データをアプリの外に出します。まずはuseEffectで読みこむところから。