Reactjs this.setState не является функциональной ошибкой

Question

Im novice to React js, я не знаю, что не так с кодом ниже, но я получаю setState не является функцией error.Please помочь мне исправить это.

class AppBarLayout extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     visibleSideBar:true, 
     slide:"" 
     } 
    } 
    showProfile(){ 

    this.setState({ 
     slide:'slide' 
    }); 
    console.log(this.state.slide); 
    } 
    render(){ 
    return(
      <div> 
     <header> 
      <NavBar show={this.showProfile}/> 
      <Profile slide={this.state.slide} /> 
     </header> 
     </div> 
    ); 
    } 
} 
export default AppBarLayout; 

Answer 1

Вы должны связать this.showProfile в компоненте конструктора

this.showProfile = this.showProfile.bind(this)

Более подробно об этом на Обработка событий страница React документ: https://facebook.github.io/react/docs/handling-events.html

Answer 2

Расширяя Delapouite ' s ответ, если вам не нравится связывать каждую функцию в конструкторе, вы можете использовать функции стрелок для автоматического связывания к правильному контексту.

Например:

class AppBarLayout extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     visibleSideBar:true, 
     slide:"" 
     } 
    } 

    // Now showProfile is an arrow function 
    showProfile =() => { 
    this.setState({ 
     slide:'slide' 
    }); 
    console.log(this.state.slide); 
    } 

    render(){ 
    return(
     <div> 
     <header> 
      <NavBar show={this.showProfile}/> 
      <Profile slide={this.state.slide}/> 
     </header> 
     </div> 
    ); 
    } 
} 
export default AppBarLayout;