Uncaught TypeError: अशक्त

Question

• की संपत्ति 'सहारा' पढ़ा नहीं जा सकता मैं एक प्रतिक्रिया कोड
• इस कोड को यूआई में विभिन्न पैनलों renders है।
• जब मैं एक टैग क्लिक करें, इस समारोह 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

जब से तुम, वर्ग के तरीकों this घटक उदाहरण के लिए संदर्भित करता नहीं करता है में React.createClass उपयोग नहीं कर रहे हैं ताकि आप इसे मैन्युअल रूप से बांधना चाहिए। ऐसे कई तरीके हैं:

1. मैन्युअल रूप से वर्ग निर्माता में this बाँध

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

2. तीर समारोह के साथ उपयोग ES7 संपत्ति initializers

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

ऐसा लगता है कि आप अपनी प्रतिक्रिया घटक पर एक getDefaultProps विधि अनुपलब्ध हो सकता है में देख सकते हैं। आप कुछ इस तरह सामान्य विचार कर सकते हैं, बस त्रुटि को रद्द करना और देखना और क्या है अप करने के लिए:

getDefaultProps() { return {}; }