Javascript 未捕获类型错误：无法读取属性'；道具'；空的 我有一个反应码 此代码在UI中呈现各种面板 单击标记时，此函数称为sportsCornerPanel（） 但是我得到了一个未捕获的类型错误如何修复它 下面提供代码片段 你可以在小提琴上看到整个代码

代码片段

    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

sportsCornerPanel（）{
调试器；
控制台日志（“sportsCornerPanel”
log（“this.props.sportPanelState.size-->”+this.props）；
if（this.props.sportsPanelState.size==='hidden'）{
如果（！this.props.sportsPanelState.visible）{
this.props.dispatch（sportopenpanel（））；
}否则{
this.props.dispatch（sportsClosePanel（））；
}
}
}
render（）{
让sportsContent、leftNavLink；
如果（this.props.sports-layout！=='small'）{
log（“SportsBox——页面加载更大”）；
log（“SportsBox——ipad大小的页面加载”）；
体育内容=；
}否则{
if（this.props.sportsPanelState.visible）{
log（“sportsPanelState——当它变小时——大约ipad宽度”）；
体育内容=；
leftNavLink=；
}否则{
if（this.props.sports.active）{
控制台日志（“运动箱”）；
体育内容=；
}否则{
log（“leftNavLink——当它变小时——大约ipad宽度”）；
leftNavLink=；
}
}
}
输出
未捕获的TypeError:无法读取null的属性“props”
 > 看起来你可能在你的反作用组件上丢失了一个<代码> GETDebug ToPs< /Cord>方法。你可以考虑这样的泛型，只是为了消除错误，看看还有什么：

getDefaultProps（）{return{}；}
因为您没有在类方法中使用
React.createClass
此
不引用组件实例，所以您应该手动绑定它。有几种方法：

1.手动绑定
此
类内构造函数

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.在呼叫站点绑定
此

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

let sportsContent，leftNavLink；
如果（this.props.sports-layout！=='small'）{
log（“SportsBox——页面加载更大”）；
log（“SportsBox——ipad大小的页面加载”）；
体育内容=；
}否则{
if（this.props.sportsPanelState.visible）{
log（“sportsPanelState——当它变小时——大约ipad宽度”）；
体育内容=；
leftNavLink=；
}否则{
if（this.props.sports.active）{
控制台日志（“运动箱”）；
体育内容=；
}否则{
log（“leftNavLink——当它变小时——大约ipad宽度”）；
leftNavLink=；
}
}
}
在构造函数中声明一个局部变量以捕获上下文

我在使用
class className extends React.Component而不是
createClass（）
时遇到了同样的问题。在构造函数中创建一个变量来解决这个问题

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

使用
self.props
而不是
this.props
无处不在！
在构造函数中绑定该方法效果非常好。
感谢您的回复…您能在我的代码中更新它吗…它令人困惑错误是说问题出在react组件本身，而不一定是它的道具，这让我认为道具不是问题所在-您是否测试过此解决方案以查看其是否有效？@NickZuber是否有可能更新我的代码它如此令人困惑：（谢谢你的回复…你能告诉我你是如何调试和发现的吗…这样以后我就可以自己做了…如果你告诉我把控制台放在哪里..我会在使用
extensed React.Component
而不是
React.createClass（）时放进去并理解它的常见问题）
。但是你能告诉我你是如何调试并找出答案的……这样以后我就可以避免它了……请只需
console.log（这个）就可以进行调试了
在类的开头方法中。如果它输出
null
或
未定义的
，那么这就是问题所在。Arrow函数的词法
此
与它周围的代码相同，因此由于属性初始值设定项的作用域，我们得到了期望的结果。Genius！谢谢。
class Example extends Component {

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