【要約】Uncaught Error: Objects are not valid as a React child (found: object with keys {error}). If you meant to render a collection of children, use an array instead.の解決法 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
Reactを用いたアプリケーション開発において、エラーメッセージの表示処理を実装した際、画面がクラッシュする問題が発生した。開発者が入力チェックエラーを画面に表示しようとした際、以下の事象に直面した。
- ・エラー発生時に画面が真っ白になり、コンソールに「Objects are not valid as a React child」というエラーが出力される。
- ・エラーオブジェクト（{error}）をそのままJSXの波括弧内で展開しようとしたことが原因である。
- ・Reactの仕様により、プレーンなオブジェクトを直接子要素としてレンダリングすることはできない。
// Approach
発生したエラーを解消するため、Reactがレンダリング可能な形式へとJSXの記述を修正するアプローチをとった。具体的には、オブジェクトをそのまま出力するのではなく、適切なHTML要素として扱うように変更した。
- ・修正前：
{error && ({error})}のように、オブジェクトを直接レンダリングしようとしていた。 - ・修正後：
<div>{error}</div>のように、エラー内容を適切なHTMLタグで囲む形に修正した。 - ・これにより、Reactが描画可能な要素としてエラー内容を認識できるようにした。
// Result
修正により、エラーオブジェクトが適切に処理され、画面がクラッシュすることなく入力チェックエラーが表示されるようになった。開発者にとって以下の成果が得られた。
- ・エラー表示機能が正常に動作し、ユーザーにエラー内容を伝えることが可能になった。
- ・Reactのレンダリング規則に基づいた、正しいJSXの記述方法を再確認できた。
Senior Engineer Insight
> 本件はReact初学者が必ず遭遇する典型的なエラーである。エラーメッセージ自体に「found: object with keys {error}」と原因が明示されている。実務においては、エラーオブジェクト全体を渡すのではなく、エラーメッセージ（string）のみを抽出して状態管理する設計が重要だ。また、TypeScriptを導入することで、レンダリング対象の型を厳密に管理し、こうしたミスをコンパイル時に防ぐべきである。大規模開発では、こうした初歩的なミスを防ぐための静的解析環境の整備が不可欠となる。