web-dev-qa-db-ja.com

不明なTypeError：nullのプロパティ 'props'を読み取れません

  • 反応コードがあります
  • このコードは、UIにさまざまなパネルをレンダリングします。
  • タグをクリックすると、この関数はsportsCornerPanel（）と呼ばれます
  • しかし、Uncaught TypeErrorを修正する方法を取得しています
  • 以下のスニペットコードを提供します。
  • コード全体をフィドルで見ることができます

コードスニペット

    sportsCornerPanel() {
        debugger;

        console.log("sportsCornerPanel"
        console.log("this.props.sportsPanelState.size-->" + this.props);

        if (this.props.sportsPanelState.size === 'hidden') {

            if (!this.props.sportsPanelState.visible) {
                this.props.dispatch(sportsOpenPanel());
            } else {
                this.props.dispatch(sportsClosePanel());
            }
        }
    }


    render() {


        let sportsContent, leftNavLink;

        if (this.props.sports-layout !== 'small') {
            console.log("SportsBox---page loads at bigger size");
            console.log("SportsBox---page loads at ipad size");
            sportsContent = <SportsBox className="sports-header"/>;
        } else {
            if (this.props.sportsPanelState.visible) {
                console.log("sportsPanelState--when it becomes small--around ipad width");

                sportsContent = <SportsBox className="sports-nav"/>;
                leftNavLink = <a onClick={this.sportsCornerPanel} href="javascript:;" className="header-navLink active"></a>;
            } else {
                if (this.props.sports.active) {

                    console.log("SportsBox");

                    sportsContent = <SportsBox className="sports-nav"/>;
                } else {

                    console.log("leftNavLink--when it becomes small--around ipad width");

                    leftNavLink = <a onClick={this.sportsCornerPanel} href="javascript:;" className="header-navLink"></a>;
                }
            }
        }


output

Uncaught TypeError: Cannot read property 'props' of null
javascriptjsonreactjs
29
user5075509

クラスメソッドでReact.createClassを使用していないため、thisはコンポーネントインスタンスを参照しないため、手動でバインドする必要があります。いくつかの方法があります。

1。クラスコンストラクターでthisを手動でバインドします

constructor(props) {
    super(props);
    this.sportsCornerPanel= this.sportsCornerPanel.bind(this);
}

2。矢印関数でES7プロパティ初期化子を使用

sportsCornerPanel = () => {
    debugger;

    console.log("sportsCornerPanel"
    console.log("this.props.sportsPanelState.size-->" + this.props);

    if (this.props.sportsPanelState.size === 'hidden') {

        if (!this.props.sportsPanelState.visible) {
            this.props.dispatch(sportsOpenPanel());
        } else {
            this.props.dispatch(sportsClosePanel());
        }
    }
}

。呼び出しサイトでthisをバインド

render()メソッド内：

    let sportsContent, leftNavLink;

    if (this.props.sports-layout !== 'small') {
        console.log("SportsBox---page loads at bigger size");
        console.log("SportsBox---page loads at ipad size");
        sportsContent = <SportsBox className="sports-header"/>;
    } else {
        if (this.props.sportsPanelState.visible) {
            console.log("sportsPanelState--when it becomes small--around ipad width");

            sportsContent = <SportsBox className="sports-nav"/>;
            leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink active"></a>;
        } else {
            if (this.props.sports.active) {

                console.log("SportsBox");

                sportsContent = <SportsBox className="sports-nav"/>;
            } else {

                console.log("leftNavLink--when it becomes small--around ipad width");

                leftNavLink = <a onClick={this.sportsCornerPanel.bind(this)} href="javascript:;" className="header-navLink"></a>;
            }
        }
    }
51
xCrZx

コンテキストをキャプチャするために、コンストラクターでローカル変数を宣言します。

createClass()の代わりにclass className extends React.Componentを使用しているときに同じ問題に直面しました。これを修正するには、コンストラクターで変数を作成します。

constructor(props) {
    super(props);
    self = this;
}

どこでもself.propsの代わりにthis.propsを使用してください！

1
Naveen

コンストラクタでメソッドをバインドすると、まったく問題なく機能しました。

class Example extends Component {

  constructor(props) {
    super(props);
    this.homeButtonClicked= this.homeButtonClicked.bind(this);
  }
}
0
Prashant Yalatwar

ReactコンポーネントのgetDefaultPropsメソッドが欠落しているようです。エラーを無効にして、他に何が起きているかを確認するために、次のような一般的なものを検討することができます。

getDefaultProps () { return {}; }

0
balanceiskey