状态更改未重新呈现组件概念问题答案

【问题标题】：State Change Not Rerendering Component Conceptual Question状态更改未重新呈现组件概念问题
【发布时间】：2020-06-30 16:15:51
【问题描述】：

我有以下 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>
        );
    }
}

【问题讨论】：

this.isVisible 是undefined。应该是this.state.isVisible。
道歉 - 感谢您指出这一点。不幸的是，我遇到了同样的问题。

标签： javascript reactjs render setstate

【解决方案1】：

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

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" />

【讨论】：

我的导航栏按钮组件有宽度和高度，所以我相信导航栏组件有内容。
您如何验证它是否被实际点击？问题出在setState?
例如，如果您将div 更改为包含onClick = {() => console.log('clicked')}，您会看到日志吗？
感谢您的建议。我现在就试试。您还可以链接您编写的 javscript 文件以在您的答案中生成代码 sn-p 吗？我看到它正在工作。
没有什么可以链接的，我都写在答案里面了

【解决方案2】：

如果您的新状态依赖于先前的状态，请使用 setState 的 functional form：

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

【讨论】：

这可能是推荐的做法，但与当前问题无关。