ReactJSコンポーネントのonClickメソッドで 'this'の値がnullです

Question

onClickメソッドがエラー<span className="nav-toggle">でエラーが発生しました。エラーは次のとおりです。nullのプロパティセット状態を読み取ることができません。thisのスコープでの問題、またはsetStateが非同期メソッドであると思われます。だからこそ私はドキュメント内で推奨されているメソッドを使用しようとしました（新しい状態オブジェクトを渡す代わりに関数でsetStateを使用する）。

あなたはハンドラに thisをバインドする必要が

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

：

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

詳しい情報here