Javascript 未捕获的类型错误：无法读取 null 的属性“道具”

Uncaught TypeError: Cannot read property 'props' of null

提问by xCrZx

• I have a react code
• this code renders various panels in the UI.
• when I click a tag, this function is called sportsCornerPanel()
• but I am getting the Uncaught TypeError how to fix it
• providing snippet code below.
• whole code you can see it in the fiddle

• 我有一个反应代码
• 此代码在 UI 中呈现各种面板。
• 当我点击一个标签时，这个函数被称为sportsCornerPanel()
• 但我收到了 Uncaught TypeError 如何修复它
• 提供下面的代码片段。
• 整个代码你可以在小提琴中看到

code snippet

代码片段

    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

回答by xCrZx

Since you are not using React.createClassin class methods thisdoesn't refers to the component instance, so you should bind it manually. There are several ways:

由于您没有React.createClass在类中使用方法this不引用组件实例，因此您应该手动绑定它。有几种方式：

1. Manually bind thisin class constructor

1.this在类构造函数中手动绑定

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

2. Use ES7 Property initializers with arrow function

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. Bind thisat call-site

3.this调用现场绑定

In render()method:

在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>;
            }
        }
    }

回答by Naveen

Declare a local variable in constructor for capturing context.

在构造函数中声明一个局部变量来捕获上下文。

I faced the same issue while using class className extends React.Componentinstead of createClass(). Create a variable in constructor to fix this.

我在使用class className extends React.Component而不是createClass(). 在构造函数中创建一个变量来解决这个问题。

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

Use self.propsinstead of this.propseverywhere!

使用self.props而不是this.props无处不在！

回答by Prashant Yalatwar

binding the method in constructor worked absolutely fine.

在构造函数中绑定方法工作得很好。

class Example extends Component {

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

回答by balanceiskey

It looks like you might be missing a getDefaultPropsmethod on your React component. You might consider something generic like this, just to nullify the error and see what else is up:

看起来getDefaultProps您的 React 组件可能缺少一个方法。您可能会考虑这样的通用内容，只是为了消除错误并查看还有什么问题：

getDefaultProps () { return {}; }

getDefaultProps () { return {}; }