Objects are not valid as a React child の原因と解決策

概要

Reactコンポーネントでオブジェクトを直接レンダリングしようとした際に発生するエラーです。Reactは文字列、数値、要素、配列をレンダリングできますが、プレーンなオブジェクトは直接レンダリングできません。

エラーメッセージ

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

または

Objects are not valid as a React child (found: [object Promise]).

原因

このエラーは以下の原因で発生します:

オブジェクトを直接表示: {user} のようにオブジェクトをそのままレンダリング
Promiseを直接表示: 非同期データをawaitせずにレンダリング
Dateオブジェクトを直接表示: {new Date()} をそのままレンダリング
JSON.parse結果をそのまま表示: パースしたオブジェクトを直接レンダリング

解決策

1. オブジェクトのプロパティを個別に表示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// NG: オブジェクトを直接レンダリング
function UserCard({ user }) {
  return <div>{user}</div>; // Error!
}

// OK: プロパティを個別に表示
function UserCard({ user }) {
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

2. JSON.stringify でデバッグ表示

1
2
3
4
5
6
7
8
// デバッグ用にオブジェクトを表示
function DebugView({ data }) {
  return (
    <pre>
      {JSON.stringify(data, null, 2)}
    </pre>
  );
}

3. Promiseを正しく処理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// NG: Promiseを直接レンダリング
function UserList() {
  const users = fetchUsers(); // Promiseを返す
  return <div>{users}</div>; // Error!
}

// OK: useStateとuseEffectで非同期データを処理
function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

4. Dateオブジェクトを文字列に変換

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// NG: Dateオブジェクトを直接レンダリング
function DateDisplay() {
  return <p>{new Date()}</p>; // Error!
}

// OK: 文字列に変換
function DateDisplay() {
  return <p>{new Date().toLocaleDateString()}</p>;
}

// または toISOString()
function DateDisplay() {
  return <p>{new Date().toISOString()}</p>;
}

5. 配列の要素を正しくレンダリング

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// NG: オブジェクトの配列をそのまま表示
function ItemList({ items }) {
  return <div>{items}</div>; // Error if items contains objects
}

// OK: mapで各要素を処理
function ItemList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.id || index}>{item.name}</li>
      ))}
    </ul>
  );
}

6. 条件付きレンダリングでの注意

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// NG: 空オブジェクトのチェックミス
function Content({ data }) {
  return <div>{data && data}</div>; // data がオブジェクトだとエラー
}

// OK: 具体的なプロパティを表示
function Content({ data }) {
  return <div>{data && data.content}</div>;
}

// OK: オブジェクトの存在確認後にプロパティ表示
function Content({ data }) {
  if (!data) return null;
  return <div>{data.content}</div>;
}

よくある間違い

APIレスポンスをそのままレンダリングしようとする
console.log のノリで {object} と書いてしまう
TypeScriptで型定義しているのに実行時にオブジェクトが渡される
親コンポーネントからオブジェクトを文字列として渡すべきところをそのまま渡す

TypeScriptでの予防

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
interface User {
  name: string;
  age: number;
}

// 型を明示することでエラーを事前に防ぐ
function UserCard({ user }: { user: User }) {
  return (
    <div>
      <p>{user.name}</p>  {/* string なのでOK */}
      <p>{user.age}</p>   {/* number なのでOK */}
    </div>
  );
}

Objects are not valid as a React child

概要

エラーメッセージ

原因

解決策

1. オブジェクトのプロパティを個別に表示

2. JSON.stringify でデバッグ表示

3. Promiseを正しく処理

4. Dateオブジェクトを文字列に変換

5. 配列の要素を正しくレンダリング

6. 条件付きレンダリングでの注意

よくある間違い

TypeScriptでの予防

関連エラー

参考リンク

関連エラー

React の他のエラー