私はonclickの方法上のナビゲーションバーを崩壊しようとしていますが、それは、これは、コンソールからのエラーです

Question

が動作していない：

は、（renderまたは別のコンポーネントのコンストラクタ内など）は、既存の状態遷移時に更新できません。レンダリング方法は、小道具と州の純粋な機能でなければなりません。コンストラクタの副作用はアンチパターンですが、 `componentWilmount 'に移動することができます。

コード：ここ

import {Component, PropTypes} from 'react'; 

    import './Header.less'; 

    import { Button,Navbar, Nav, NavItem, CollapsibleNav, NavDropdown, NavBrand, MenuItem} from 'react-bootstrap'; 

    import SearchBar from 'components/search/SearchBar'; 

    import {LinkContainer} from 'react-router-bootstrap'; 

export default class Header extends Component { 

    static propTypes = { 

     flux: PropTypes.object.isRequired, 

     searchTerm: PropTypes.string 

    }; 

    state = { 
      navExpanded: false 
    } 

    onNavItemClick =() => { 
     this.setState({ navExpanded: false }); 
    } 

    onNavbarToggle =() => { 
     this.setState({navExpanded: !this.state.navExpanded}); 
    } 

    render() { 
     return (
      <Navbar fixedTop inverse toggleNavKey={0} onClick={this.onNavbarToggle()}> 
       <Navbar.Header> 
        <Navbar.Brand> 
         <LinkContainer to={"/"}> 
          <a className="navbar-brand"><img alt="######" src={Logo} /></a> 
         </LinkContainer> 
        </Navbar.Brand> 
        <Navbar.Toggle /> 
       </Navbar.Header> 
       <Navbar.Collapse> 
        <Nav navbar> 
         <LinkContainer to={"/#####"}> 
          <NavItem onClick={ this.onNavItemClick } eventKey={1}>xxxxxxxxxxxxxx</NavItem> 
         </LinkContainer> 
         <LinkContainer to={"/#####"}> 
          <NavItem onClick={ this.onNavItemClick } eventKey={2}>xxxxxxxxxxxx</NavItem> 
         </LinkContainer> 
         <LinkContainer to={"/#######"}> 
          <NavItem onClick={ this.onNavItemClick } eventKey={3}>xxxxxxxxx</NavItem> 
         </LinkContainer> 
         <LinkContainer to={"/######"}> 
          <NavItem onClick={ this.onNavItemClick } eventKey={4}>xxxxxxxxx</NavItem> 
         </LinkContainer> 
         <LinkContainer to={"/######"}> 
          <NavItem onClick={ this.onNavItemClick } eventKey={5}>xxxxxxxxx</NavItem> 
         </LinkContainer> 
        </Nav> 
        <Nav pullRight> 
         <SearchBar onClick={ this.onNavItemClick } searchTerm={this.props.searchTerm} /> 
        </Nav> 
       </Navbar.Collapse> 
      </Navbar> 
     ); 
    } 
} 

Answer 1

：

<Navbar fixedTop inverse toggleNavKey={0} onClick={this.onNavbarToggle()}> 

代わりに、あなたが望むものではありません結果機能を実行しているの、に渡している関数本体this.onNavbarToggleに渡します。関数はすべてのレンダリングで評価されています。あなたはそうのように、関数への参照ではなく、関数の結果を渡す必要があります。

<Navbar fixedTop inverse toggleNavKey={0} onClick={this.onNavbarToggle}> 

Answer 2

：

<Navbar fixedTop inverse toggleNavKey={0} onClick={this.onNavbarToggle()}> 

あなたはrender内、すぐに（状態を更新する）onNavbarToggle()を呼んでいます。 NavItemとSearchBaronClickのprops do（sans invocation）と同じ方法で参照するとうまくいくはずです。あなたがの場合にはcomponentWillMountを使用することを推奨しています。はすぐにそのメソッドを呼びたいと思っています。この行で