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

这里：

<dependency org="com.toddfast.mutagen" name="mutagen-cassandra" rev="0.4.0" conf="master->default"/>
<dependency org="org.apache.cassandra" name="cassandra-all" rev="2.1.12" conf="master->default"/>

您正在<Navbar fixedTop inverse toggleNavKey={0} onClick={this.onNavbarToggle()}>内立即呼叫onNavbarToggle()（更新状态）。如果您以与render和NavItem SearchBar道具相同的方式引用它（无调用），它应该有效。如果您做想立即调用该方法，React建议您使用onClick。

我试图在onclick方法上折叠导航栏，但它无法正常工作

2 个答案: