Uncaught TypeError: nie można odczytać własności „rekwizyty” null

Question

• mam reagować kod
• ten kod powoduje różne panele w interfejsie użytkownika.
• po kliknięciu znacznika, funkcja ta nazywa sportsCornerPanel()
• ale otrzymuję Uncaught TypeError jak naprawić to
• zapewniając poniżej fragmencie kodu.
• cały kod można zobaczyć go na skrzypcach

fragment kodu

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

Ponieważ nie używasz React.createClass w metodach klasy this nie odnosi się do instancji składnika, więc powiąż go ręcznie. Istnieje kilka sposobów:

1. Ręczne wiążą this w konstruktorze klasy

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

2. inicjalizatory Zastosowanie ES7 działce z funkcją strzałki

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. oprawę this na zadzwoń do witryny

W render() metody:

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

Wygląda na to może być brakuje getDefaultProps metody na swojej React komponentu. Można rozważyć coś takiego rodzajowe, żeby zniweczyć błąd i zobaczyć, co jeszcze jest do:

getDefaultProps() { return {}; }