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

Posted 2023-02-22

【中文标题】未捕获的类型错误：无法读取 null 的属性“道具”

【英文标题】：Uncaught TypeError: Cannot read property 'props' of null

【发布时间】：2016-05-20 02:43:27

【问题描述】：

我有一个反应代码 此代码在 UI 中呈现各种面板。 当我点击一个标签时，这个函数被称为sportsCornerPanel() 但是我得到了 Uncaught TypeError 如何解决它 在下面提供 sn-p 代码。 您可以在小提琴中看到完整的代码

代码 sn-p

    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

【参考方案1】：

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

class Example extends Component 

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

【参考方案2】：

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

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

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

在任何地方都使用self.props 而不是this.props！

【讨论】：

天才！谢谢。

【参考方案3】：

由于您没有在类方法中使用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>;
            
        
    

【讨论】：

感谢您的回复...您能告诉我您是如何调试和发现的...以便将来我可以自己做...如果您告诉我将控制台放在哪里...我会理解的

使用extends React.Component 代替React.createClass() 时的常见问题。

但是你能告诉我你是如何调试和发现的……这样我以后就可以避免它了……请

要调试，只需在类方法的开头console.log(this)。如果它输出null或undefined，那么这就是问题所在。

箭头函数与围绕它的代码具有相同的词法this，因此由于属性初始化器的作用域，我们得到了想要的结果。

【参考方案4】：

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

getDefaultProps () return ;

【讨论】：

感谢您的回复...您能在我的代码中更新它吗...令人困惑

错误是说问题出在反应组件本身而不一定是它的道具这一事实让我认为 道具 不是问题 - 你有吗测试了这个解决方案，看看它是否有效？

@NickZuber 是否可以更新我的代码，这太令人困惑了:(