Question

我是ReactJS的新手，并在用户单击导航栏时尝试更新页面，但是页面不会更新。我收到错误消息：

Warning: Can't call setState on a component that is not yet mounted.

当前导航栏如下所示：

// Navbar Component
class Navbar extends React.Component {

  constructor(){
    super();
    this.state = {page: 'home'};
    this.onHomeClick = this.onHomeClick.bind(this);
    this.onAboutClick = this.onAboutClick.bind(this);
  }

  onHomeClick(){

    this.setState({page: 'home'});

  }

  onAboutClick(){

    this.setState({page: 'about'});

  }

  render() {
    const home = React.createElement('li', {className: 'navbar-item', id: 'homeButton', onClick: this.onHomeClick}, 'Home');
    const about = React.createElement('li', {className: 'navbar-item', id: 'about', onClick: this.onAboutClick}, 'About');

    const navbar = React.createElement('ul', {className: 'navbar'}, about, home);

    return navbar;
  }

}

最终应用程序将最终结果呈现如下：

// App
class App extends React.Component{

  constructor(props){
    super(props);
  }

  render() {
    var navbar = new Navbar;
    var header = new Header;
    var slideshow = new Slideshow;
    var aboutMe = new AboutMe;

    if(navbar.state.page == 'home'){
      return React.createElement('div', {className: 'main-page'}, navbar.render(), header.render(), slideshow.render());
    } else if (navbar.state.page == 'about'){
      return React.createElement('div', {className: 'about-page'}, navbar.render(), header.render(), aboutMe.render());
    }
  }
}


// Render Application components
ReactDOM.render(
  React.createElement(App, null, null),
  document.getElementById('root')
);

关于优雅处理onclick事件的任何想法吗？

Answer 1

好吧，您得到的错误是因为您没有调用Navbar组件的构造函数。

更改此

var navbar = new Navbar;

到

var navbar = new Navbar(); // call constructor

也更改其他组件的构造函数

希望有帮助

ReactJS更改状态onClick（无JSX）

1 个答案: