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()方法中，并使用bind删除this。最终目标是使用这些按钮更改语言状态，并使用道具将其转移到不同的页面

Answer 1

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

第二，所有这些事情之所以发生，是因为函数具有自己的上下文。

是否对方法调用使用绑定：

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

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

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

Answer 2

您只需要在构造函数中添加以下代码：

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

以上代码的作用是，将langEn上下文更改为this的新功能替换了现有的class App函数。

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

Answer 3

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

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>
...

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

3 个答案: