React「Cannot read property props」エラーの原因と解決方法を徹底解説

Reactを使っていて「Cannot read property ‘props’ of undefined」というエラーに遭遇したことはありませんか？このエラーは、Reactを学び始めた初心者が非常によく経験するエラーの一つです。このエラーが発生する理由は複数あり、原因によって解決方法も異なります。

本記事では、このエラーの発生原因から具体的な解決手順、さらには実際のコード例を交えながら、初心者でも理解しやすいように詳しく解説していきます。

Reactの「Cannot read property props」エラーとは
原因の詳細説明
解決手順
コード例による具体的な解決方法
よくある間違いと対策
トラブルシューティング：エラーが続く場合
最新のReactトレンド：関数型コンポーネントとHooks
1. 関数型コンポーネント＋useStateの例
2. 関数型コンポーネント＋useEffectの例
まとめ

Reactの「Cannot read property props」エラーとは

「Cannot read property ‘props’ of undefined」というエラーメッセージが表示される場合、これはJavaScriptが「propsというプロパティを読もうとしているが、そのプロパティが存在しないオブジェクト（undefined）に対してアクセスしようとしている」という意味です。

Reactにおいて、このエラーが発生する主な原因は以下の通りです：

thisキーワードのバインディングが正しく行われていない
コンポーネントの外でpropsを使用している
関数型コンポーネントでthisを使用している
イベントハンドラーのコンテキストが失われている
propsを正しく受け取っていない

原因の詳細説明

1. thisキーワードのバインディングが正しく行われていない

クラスコンポーネントを使用する場合、メソッド内でthisを使用するには、適切なバインディングが必要です。バインディングされていないと、thisはundefinedになり、this.propsにアクセスできなくなります。

クラスコンポーネントでは、メソッドが呼び出されるときに、その中のthisがコンポーネントインスタンスを指すようにする必要があります。これを「バインディング」と呼びます。

2. 関数型コンポーネントでthisを使用している

Reactには大きく分けてクラスコンポーネントと関数型コンポーネントの2種類があります。関数型コンポーネントではthisキーワードが存在しません。関数型コンポーネント内でthis.propsを使用しようとすると、このエラーが発生します。

3. イベントハンドラーのコンテキストが失われている

クラスコンポーネントのメソッドがイベントハンドラーとして使用される場合、コンテキスト（this）が失われることがあります。特に、コンストラクタで明示的にバインディングしていない場合に問題が発生しやすいです。

解決手順

手順1：エラーの原因を特定する

まず、エラーが発生している行を特定することが重要です。ブラウザの開発者ツール（DevTools）を開いて、エラースタックトレースを確認してください。どのファイルのどの行でエラーが発生しているかを把握することが、解決の第一歩です。

手順2：使用しているコンポーネントの種類を確認する

次に、エラーが発生しているコンポーネントが「クラスコンポーネント」か「関数型コンポーネント」かを確認してください。

クラスコンポーネント：class MyComponent extends React.Component

関数型コンポーネント：function MyComponent(props)

手順3：適切な修正を適用する

コンポーネントの種類に応じて、以下の修正を適用します。

コード例による具体的な解決方法

【問題のあるコード】クラスコンポーネントでバインディングがない場合


class MyComponent extends React.Component {
  handleClick() {
    console.log(this.props); // ここでエラーが発生
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        クリック
      </button>
    );
  }
}

上記のコードでは、handleClick()メソッド内でthis.propsにアクセスしようとしていますが、thisが正しくバインディングされていないため、thisはundefinedになり、エラーが発生します。

【解決策1】コンストラクタで明示的にバインディングする


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // メソッドをバインディング
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props); // 正常に動作
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        クリック
      </button>
    );
  }
}

コンストラクタ内で.bind(this)を使用することで、メソッドのthisをコンポーネントインスタンスに固定します。これが最も一般的な解決方法です。

【解決策2】アロー関数を使用する


class MyComponent extends React.Component {
  // アロー関数を使用することで、thisが自動的にバインディングされます
  handleClick = () => {
    console.log(this.props); // 正常に動作
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        クリック
      </button>
    );
  }
}

クラスフィールド構文（アロー関数）を使用すると、自動的にthisがバインディングされるため、bind()の処理が不要になります。これはモダンなReactの書き方として一般的です。

【解決策3】レンダリング時にアロー関数でラップする


class MyComponent extends React.Component {
  handleClick() {
    console.log(this.props); // 正常に動作
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        クリック
      </button>
    );
  }
}

レンダリングの際にアロー関数でメソッドをラップする方法です。ただし、この方法は毎回レンダリング時に新しい関数が作成されるため、パフォーマンス上の考慮が必要です。

【問題のあるコード】関数型コンポーネントでthisを使用


function MyComponent() {
  const handleClick = () => {
    console.log(this.props); // エラー：関数型コンポーネントではthisが存在しない
  }

  return (
    <button onClick={handleClick}>
      クリック
    </button>
  );
}

【解決策】propsをパラメータとして受け取る


function MyComponent(props) {
  const handleClick = () => {
    console.log(props); // 正常に動作
  }

  return (
    <button onClick={handleClick}>
      クリック
    </button>
  );
}

// または分割代入を使用
function MyComponent({ name, age }) {
  const handleClick = () => {
    console.log(name, age); // 必要なpropsに直接アクセス
  }

  return (
    <button onClick={handleClick}>
      クリック
    </button>
  );
}

関数型コンポーネントではthisは存在しないため、propsをパラメータとして直接受け取ります。分割代入を使用することで、より読みやすいコードになります。

【実践例】複数のメソッドがあるクラスコンポーネント


class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false
    };

    // 複数のメソッドをバインディング
    this.handleLoadUser = this.handleLoadUser.bind(this);
    this.handleDeleteUser = this.handleDeleteUser.bind(this);
  }

  handleLoadUser() {
    this.setState({ isLoading: true });
    // this.propsを使用してAPIコール
    console.log('ユーザーID:', this.props.userId);
  }

  handleDeleteUser() {
    // this.propsを使用
    console.log('削除:', this.props.userId);
  }

  render() {
    const { userName, userId } = this.props;

    return (
      <div>
        <h1>{userName}</h1>
        <button onClick={this.handleLoadUser}>読み込み</button>
        <button onClick={this.handleDeleteUser}>削除</button>
      </div>
    );
  }
}

【実践例】複数のメソッドがあるクラスコンポーネント（アロー関数版）


class UserProfile extends React.Component {
  state = {
    isLoading: false
  };

  // アロー関数を使用することでバインディングが不要
  handleLoadUser = () => {
    this.setState({ isLoading: true });
    console.log('ユーザーID:', this.props.userId);
  }

  handleDeleteUser = () => {
    console.log('削除:', this.props.userId);
  }

  render() {
    const { userName, userId } = this.props;

    return (
      <div>
        <h1>{userName}</h1>
        <button onClick={this.handleLoadUser}>読み込み</button>
        <button onClick={this.handleDeleteUser}>削除</button>
      </div>
    );
  }
}

よくある間違いと対策

間違い1：バインディングを忘れている


// ❌ 間違い
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // バインディングなし
  }

  handleClick() {
    console.log(this.props); // エラーが発生
  }

  render() {
    return <button onClick={this.handleClick}>クリック</button>;
  }
}

// ✅ 正しい
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props); // 正常に動作
  }

  render() {
    return <button onClick={this.handleClick}>クリック</button>;
  }
}

間違い2：関数型コンポーネントでthisを使用している


// ❌ 間違い
function MyComponent(props) {
  const handleClick = () => {
    console.log(this.props); // thisはundefined
  }
  return <button onClick={handleClick}>クリック</button>;
}

// ✅ 正しい
function MyComponent(props) {
  const handleClick = () => {
    console.log(props); // propsを直接使用
  }
  return <button onClick={handleClick}>クリック</button>;
}

間違い3：propsを受け取っていない


// ❌ 間違い
function MyComponent() {
  return (
    <div>
      <p>{this.props.name}</p> // thisが存在しない
    </div>
  );
}

// ✅ 正しい
function MyComponent(props) {
  return (
    <div>
      <p>{props.name}</p>
    </div>
  );
}

// または分割代入
function MyComponent({ name }) {
  return (
    <div>
      <p>{name}</p>
    </div>
  );
}

間違い4：Hooksを使用する場合の誤り


// ❌ 間違い
function MyComponent() {
  const handleClick = () => {
    console.log(this.props); // Hooksではthisは存在しない
  }
  return <button onClick={handleClick}>クリック</button>;
}

// ✅ 正しい
function MyComponent(props) {
  const handleClick = () => {
    console.log(props);
  }
  return <button onClick={handleClick}>クリック</button>;
}

// useEffect内でpropsを使用する場合
import { useEffect } from 'react';

function MyComponent(props) {
  useEffect(() => {
    console.log(props.userId); // propsを直接使用
  }, [props.userId]); // 依存配列にpropsを指定

  return <div>{props.name}</div>;
}

間違い5：カスタムフックでthisを使用している


// ❌ 間違い
function useCustomHook() {
  return {
    data: this.props // カスタムフックではthisは存在しない
  };
}

// ✅ 正しい
function useCustomHook(props) {
  return {
    data: props
  };
}

// または、使用する側でpropsを渡す
function useCustomHook() {
  const [data, setData] = React.useState(null);
  return { data, setData };
}

function MyComponent(props) {
  const { data } = useCustomHook();
  return <div>{props.name}</div>;
}

トラブルシューティング：エラーが続く場合

1. 開発者ツールで詳細なエラーを確認する

ブラウザのF12キーを押して開発者ツールを開き、Consoleタブで詳細なエラーメッセージを確認してください。エラースタックトレースから正確な発生位置を特定できます。

2. React DevTools拡張機能を使用する

React DevToolsを使用することで、各コンポーネントのpropsとstateを視覚的に確認できます。これにより、propsが正しく渡されているかどうかを確認できます。

3. console.logを活用してデバッグする


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('props:', props); // コンストラクタで確認
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('this:', this); // thisが正しく設定されているか確認
    console.log('this.props:', this.props);
  }

  render() {
    console.log('render内のthis.props:', this.props);
    return <button onClick={this.handleClick}>クリック</button>;
  }
}

4. propsの初期値を設定する


function MyComponent({ name = 'デフォルト名', age = 0 }) {
  return (
    <div>
      <p>名前: {name}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

// または、defaultPropsを使用
MyComponent.defaultProps = {
  name: 'デフォルト名',
  age: 0
};

最新のReactトレンド：関数型コンポーネントとHooks

現在のReactの推奨される書き方は、クラスコンポーネントではなく「関数型コンポーネント」と「Hooks」を使用することです。これにより、「Cannot read property props」というエラーを避けることができます。

関数型コンポーネント＋useStateの例


import { useState } from 'react';

function Counter({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);

  const handleClick = () => {
    setCount(count + 1);
    console.log('カウント:', count);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={handleClick}>インクリメント</button>
    </div>
  );
}

export default Counter;

関数型コンポーネント＋useEffectの例


import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    // APIからユーザー情報を取得
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        setUser(data);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err);
        setIsLoading(false);
      });
  }, [userId]); // userIdが変更されたときに実行

  if (isLoading) return <p>読み込み中...</p>;
  if (error) return <p>エラーが発生しました</p>;
  if (!user) return <p>ユーザーが見つかりません</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>メール: {user.email}</p>
    </div>
  );
}

export default UserProfile;