运行函数时无法读取未定义的属性“setState”

Question

class App extends Component {
  constructor(){
    super();
    this.state = {
      sideNav: '',
      language: 'en'
    }
  }

  langEn() {
    this.setState({language: 'en'}).bind(this);
    console.log("Language changed to en");
  }

  langEs() {
    this.setState({language: 'es'}).bind(this);
    console.log("Language changed to es");
  }

  render() {

    const mouseEnter = e => {
      this.setState({sideNav: "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL"});
    }    

    const mouseLeave = e => {
      this.setState({sideNav: "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv"});
    }


    return (
      <div className="App container">
        <div>
          <SideNav 
            onMouseEnter={mouseEnter} 
            onMouseLeave={mouseLeave}
            className={this.state.sideNav}
            onSelect={(selected) => {
                // Add your code here
            }}
          >
            <SideNav.Nav  defaultSelected="home">
                <NavItem eventKey="home">
                    <NavIcon>
                        <Link to="/"><img src={Dash}/></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/">Dashboard</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="sites">
                    <NavIcon>
                      <Link to="/sites"><img src={Site} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/sites">Sites</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="tours">
                  <NavIcon>
                    <Link to="/tours"><img src={Tour}/></Link>
                  </NavIcon>
                  <NavText>
                      <Link to="/tours">Tours</Link>
                  </NavText>
                </NavItem>
                <NavItem eventKey="media">
                    <NavIcon>
                      <Link to="/media"><img src={Media}/> </Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/media">Media</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="newSite">
                    <NavIcon>
                        <Link to="/newSite/details"><img src={NewSite} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/newSite/details">Add new Site</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="language">
                    <NavIcon>
                        <Link to="/language"><img src={Lang} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/language">Language</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey="profile">
                    <NavIcon>
                        <Link to="/profile"><img src={Profile} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to="/profile">Profile</Link>
                    </NavText>
                </NavItem>

            </SideNav.Nav>
            <button onClick={this.langEn}>EN</button>
            <button onClick={this.langEs}>ES</button>
          </SideNav>
        </div>
        <Routes childProps={this.state} />
      </div>
    );
  }
}

export default App;

当我按下两个按钮之一来运行 lanEn 或 lanEs 功能时，会发生错误。我尝试过交替它们的位置，将它们放入或移出render() 方法，使用绑定删除this。最终目标是使用这些按钮更改语言状态并使用道具将其转移到不同的页面

Answer 1

你只需要在构造函数中添加这段代码：

this.langEn = this.langEn.bind(this);

上面的代码所做的是，它将现有的langEn 函数替换为一个新函数，并将this 上下文更改为class App。

如果你不想在构造函数中手动绑定它，你可以使用箭头函数，它具有词法绑定。

Answer 2

只需简单地在构造函数中绑定方法：

class App extends Component {
  constructor(){
    super();
    this.state = {
      sideNav: '',
      language: 'en'
    }
    this.langEn.bind(this);
    this.langEs.bind(this);
  }

  langEn() {
    this.setState({language: 'en'}).bind(this);
    console.log("Language changed to en");
  }

  langEs() {
    this.setState({language: 'es'}).bind(this);
    console.log("Language changed to es");
  }

  render() {

    const mouseEnter = e => {
      this.setState({sideNav: "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL"});
    }    

    const mouseLeave = e => {
      this.setState({sideNav: "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv"});
    }


    return (
      <div className="App container">
...
      <button onClick={this.langEn}>EN</button>
      <button onClick={this.langEs}>ES</button>
...

Answer 3

首先，您尝试将this.setState 绑定到langEn 和langEn。为什么？

其次，所有这些事情的发生都是因为函数有自己的上下文。

方法调用是否使用bind：

...
<button onClick={this.langEn.bind(this)}>EN</button>
...

或使用箭头键功能（它们没有自己的上下文）：

langEn = () => {
  this.setState({language: 'es'}, () => console.log("Language changed to es"));
}