未捕獲的TypeError：無法讀取null的屬性'props'

Question

• 我有一個反應代碼
• 此代碼在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

Answer 1

既然你不使用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());
        }
    }
}

3.綁定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>;
            }
        }
    }

Answer 2

在構造函數中聲明一個局部變量以捕獲上下文。

我在使用class className extends React.Component時遇到了同樣的問題， class className extends React.Component而不是createClass() 。 在構造函數中創建一個變量來修復它。

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

到處使用self.props而不是this.props ！

Answer 3

看起來您可能在React組件上缺少getDefaultProps方法。 您可能會考慮像這樣的通用，只是為了使錯誤無效並查看其他內容：

getDefaultProps () { return {}; }

Answer 4

在構造函數中綁定方法工作得非常好。

class Example extends Component {

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