オブジェクトをそのまま表示しようとした(React)
Error: Objects are not valid as a React child (found: object with keys {id, name}).ひとことで言うと
「`{ id, name }` のようなデータのまとまりを、そのまま画面に表示しようとしました」という意味です。
よくある原因
{user}のように、まとまりのまま書いた({user.name}が正しい)- 日付(Date)をそのまま表示した
- async の関数を、そのままコンポーネントとして使った
自分で確かめること
- エラーの「found: object with keys {…}」で、どのデータか見る
たいていは、こうすると直ります
{user.name} のように中の項目を表示するか、JSON.stringify(user) で文字にします。
AIへの伝え方
下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。
次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。
【エラー】
Error: Objects are not valid as a React child (found: object with keys {id, name}).
【やったこと】
(ここに、エラーが出る前にしたことを書く。例:npm run dev を実行した)
【参考】
このエラーは「オブジェクトをそのまま表示しようとした(React)」というもので、よくある原因は次のとおりです。
・`{user}` のように、まとまりのまま書いた(`{user.name}` が正しい)
・日付(Date)をそのまま表示した
・async の関数を、そのままコンポーネントとして使った
どれに当てはまるかを確かめる方法も教えてください。