Der Wert von 'this' ist null in einer onClick-Methode für die ReactJS-Komponente

Question

Der Fehler tritt bei der onClick-Methode von <span className="nav-toggle"> auf. Der Fehler lautet: kann nicht lesen Eigenschaft setState von null .Ich denke, es ist ein Problem mit der Gültigkeitsbereich this oder setState ist eine asynchrone Methode. Aus diesem Grund habe ich versucht, die empfohlene Methode in den Dokumenten zu verwenden (setState mit einer Funktion zu verwenden, anstatt ein neues Statusobjekt zu übergeben).

export default class NavigationBar extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    isMobile: this.props.isMobile 
    }; 
} 

render() { 
console.log('Rendering component'); 
return (
    <header className="nav has-shadow"> 
    <div className="nav-left"> 
    <Link className="title" to="/">Food Diary</Link> 
    </div> 

    <span className={ (this.state.isMobile) ? 'nav-toggle is-active' : 'nav-toggle'} onClick={this.toggleMobileNav}> 
    <span></span> 
    <span></span> 
    <span></span> 
    </span> 

    <div className={ (this.state.isMobile) ? 'nav-right nav-menu is-active' : 'nav-right nav-menu'}> 
    <Link className={(this.props.currentActivePage === 'Home')? "nav-item is-active" : "nav-item"} to="/"> 
    {(this.props.loggedIn) ? 'Home' : 'Login | Register'} 
    </Link> 
    <Link className={(this.props.currentActivePage === 'Dashboard')? "nav-item is-active" : "nav-item"} to="/dashboard"> 
    Dashboard 
    </Link> 
    <Link className={(this.props.currentActivePage === 'Account')? "nav-item is-active" : "nav-item"} to="/account"> 
    My Account 
    </Link> 
    <span className="nav-item"> 
    <a className="button is-dark" href="https://github.com/"> 
     <span className="icon"> 
     <i className="fa fa-github"></i> 
     </span> 
     <span>Github Repository</span> 
    </a> 
    </span> 
    </div> 
    </header> 
); 
} 

toggleMobileNav() { 
console.log('Got inside toggleMobileNav'); 
this.setState((prevState, props) => { 
    return { 
    isMobile: !prevState.isMobile 
    }; 
}); 
} 
}; 

Answer 1

Sie haben this an Handler zu binden:

export default class NavigationBar extends Component { 
    constructor(props) { 
    super(props); 
     this.state = { 
     isMobile: this.props.isMobile 
     }; 
    this.toggleMobileNav = this.toggleMobileNav.bind(this); // BIND TO THIS 
    } 

    render() { 
    console.log('Rendering component'); 
    return (
    <header className="nav has-shadow"> 
    <div className="nav-left"> 
     <Link className="title" to="/">Food Diary</Link> 
    </div> 

    <span className={ (this.state.isMobile) ? 'nav-toggle is-active' : 'nav-toggle'} onClick={this.toggleMobileNav}> 
     <span></span> 
     <span></span> 
     <span></span> 
    </span> 

    <div className={ (this.state.isMobile) ? 'nav-right nav-menu is-active' : 'nav-right nav-menu'}> 
     <Link className={(this.props.currentActivePage === 'Home')? "nav-item is-active" : "nav-item"} to="/"> 
     {(this.props.loggedIn) ? 'Home' : 'Login | Register'} 
     </Link> 
     <Link className={(this.props.currentActivePage === 'Dashboard')? "nav-item is-active" : "nav-item"} to="/dashboard"> 
     Dashboard 
     </Link> 
     <Link className={(this.props.currentActivePage === 'Account')? "nav-item is-active" : "nav-item"} to="/account"> 
     My Account 
     </Link> 
     <span className="nav-item"> 
     <a className="button is-dark" href="https://github.com/"> 
     <span className="icon"> 
     <i className="fa fa-github"></i> 
     </span> 
     <span>Github Repository</span> 
     </a> 
     </span> 
    </div> 
    </header> 
    ); 
    } 

    toggleMobileNav() { 
    console.log('Got inside toggleMobileNav'); 
    this.setState((prevState, props) => { 
    return { 
    isMobile: !prevState.isMobile 
    }; 
    }); 
    } 
}; 

Weitere Informationen here