Reactjs this.setState不是函数错误

Question

Im新手到React js，我不知道下面的代码有什么问题，但我得到setState不是函数错误。请帮我解决这个问题。

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.bind(this)

更多细节结合this.showProfile在组件构造这个在处理事件页的阵营文档的：https://facebook.github.io/react/docs/handling-events.html

Answer 2

扩展在Delapouite“如果你不喜欢绑定构造函数中的每个函数，你可以使用箭头函数自动绑定到正确的上下文。

例如：

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;