State Change Not Rerendering 组件概念问题

Question

我有以下Javascript代码

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isVisible: false};
    }
    render() {
        console.log('hi')
        return(
            <div className = 'navbar'>
                <div className = 'nav-button'
                    onClick = {() => this.setState({isVisible: !this.state.isVisible})}>
                </div>
           
                    <div className = 'navbar-content row'>
                        <div className="navbar-item col s1 offset-s6"><h5 className="center-align">Home</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">About</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">Home</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">About</h5></div>
                    </div>
            </div>
        );
    }
}

当我单击“导航按钮”时，我应该调用 setState 来更改 isVisible 组件，因此该组件应该重新呈现并且我应该期望控制台记录 'hi'。然而，这并没有发生。我想知道为什么组件没有重新渲染。

但是，当我删除导航栏正下方的 div 标记时，组件会成功重新呈现。

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isVisible: false};
    }
    render() {
        console.log('hi')
        return(
            <div className = 'navbar'>
                <div className = 'nav-button'
                    onClick = {() => this.setState({isVisible: !this.state.isVisible})}>
                </div>
           
     
            </div>
        );
    }
}

Answer 1

如果 div 没有内容，您如何点击它？我相信你错了，你一开始就触发了 onClick 。您可以在下面看到一个简化的运行示例，说明它实际上是如何工作的（可点击的 div 现在有一个标签“测试”）。

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isVisible: false};
    }
    render() {
        console.log('hi')
        return(
            <div className = 'navbar'>
                <div className = 'nav-button'
                    onClick = {() => this.setState({isVisible: !this.isVisible})}>test
                </div>
                    <div className = 'navbar-content row'>
                        <div className="navbar-item col s1 offset-s6"><h5 className="center-align">Home</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">About</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">Home</h5></div>
                        <div className="navbar-item col s1"><h5 className="center-align">About</h5></div>
                    </div>
            </div>
        );
    }
}

ReactDOM.render(<Navbar />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Answer 2

如果您的新状态取决于之前的状态，请使用 setState 的 functional form：

...
onClick = {() => this.setState((prevState) => ({isVisible: !prevState.isVisible}))}
...

State Change Not Rerendering 组件概念问题

State Change Not Rerendering Component Conceptual Question

javascript

render

setstate

reactjs