javascript - 如何修复无法在组件上调用 setState，但它可能会在使用 React Js 的应用程序中出现错误

Question

我目前是这个框架的新手，我对这个错误有疑问。为什么这个错误显示在我的控制台上。汉堡包图标显示在我的导航栏顶部。我用这个https://medium.com/zestgeek/ant-design-navbar-with-responsive-drawer-a8d718e471e0我的导航响应抽屉。我只是遵循他在每个组件上插入的代码，但我修改了其中的一些代码。我希望有人可以帮助我。

网站输出:

错误:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Navigation component.

导航 Js:

    import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';
import LeftMenu from './LeftMenu';
import RightMenu from './RightMenu';
import { Drawer, Button } from 'antd';

class Navigation extends Component {

    constructor(props) {
        super(props);
        this.state = {
            current: 'mail',
            visible: false
        };
        this.showDrawer = this.showDrawer(this);
        this.onClose = this.onClose(this);
    }

    showDrawer(){
        this.setState({
            visible: true,
        });
    }
    onClose(){
        this.setState({
            visible: false,
        });
    }

    render() {
        return (
            <nav className="menuBar">
          <div className="logo">
            <a href="">logo</a>
          </div>
          <div className="menuCon">
            <div className="leftMenu">
              <LeftMenu />
            </div>
            <div className="rightMenu">
                <RightMenu />
            </div>
            <Button className="barsMenu" type="primary" onClick={this.showDrawer}>
              <span className="barsBtn"></span>
            </Button>
            <Drawer
              title="Basic Drawer"
              placement="right"
              closable={false}
              onClose={this.onClose}
              visible={this.state.visible}
            >
              <LeftMenu />
              <RightMenu />
            </Drawer>
            </div>
        </nav>
        )
    }
}

export default Navigation;

CSS:

<style>

.menuBar{
    padding: 0 20px;
    border-bottom: solid 1px #e8e8e8;
    overflow: auto;
    box-shadow: 0 0 30px #f3f1f1;
    }
    .logo{
    width: 150px;
    float: left;
    }
    .logo a{
    display: inline-block;
    font-size: 20px;
    padding: 19px 20px;
    text-transform: capitalize;
    }
    .menuCon{
    width: calc(100% - 150px);
    float: left;
    }
    .menuCon .ant-menu-item{
    padding: 0px 5px;
    }
    .menuCon .ant-menu-submenu-title{
    padding: 10px 20px;
    }
    .menuCon .ant-menu-item a, .menuCon .ant-menu-submenu-title a{
    padding: 10px 15px;
    }
    .menuCon .ant-menu-horizontal{
    border-bottom: none;
    }
    .menuCon .leftMenu{
    float: left;
    }
    .menuCon .rightMenu{
    float: right;
    }
    .barsMenu{
    float: right;
    height: 32px;
    padding: 6px;
    margin-top: 8px;
    display: none;
    background: none;
    }
    .barsBtn{
    display: block;
    width: 20px;
    height: 2px;
    background: #1890ff;
    position: relative;
    }
    .barsBtn:after,.barsBtn:before{
    content: attr(x);
    width: 20px;
    position: absolute;
    top: -6px;
    left: 0;
    height: 2px;
    background: #1890ff;
    }
    .barsBtn:after{
    top: auto;
    bottom: -6px;
    }
    .ant-drawer-body{
    padding: 0;
    }
    .ant-drawer-body .ant-menu-horizontal > .ant-menu-item, .ant-drawer-body .ant-menu-horizontal > .ant-menu-submenu{
    display: inline-block;
    width: 100%;
    }
    .ant-drawer-body .ant-menu-horizontal{
    border-bottom: none;
    }
    .ant-drawer-body .ant-menu-horizontal > .ant-menu-item:hover{
    border-bottom-color: transparent;
    }

    @media(max-width: 767px){
    .barsMenu{
        display: inline-block;
    }
    .leftMenu,.rightMenu{
        display: none;
    }
    .logo a{
        margin-left: -20px;
    }
    .menuCon .ant-menu-item, .menuCon .ant-menu-submenu-title{
        padding: 1px 20px;
    }
    .logo a{
        padding: 10px 20px;
    }
    }
</style>

Answer 1

为自动绑定(bind)的函数使用粗箭头

    showDrawer = () => {
        this.setState({
            visible: true,
        });
    }
    onClose = () => {
        this.setState({
            visible: false,
        });
    }

并从构造函数中删除以下行

this.showDrawer = this.showDrawer(this);
this.onClose = this.onClose(this);

或

    constructor(props) {
        super(props);
        this.state = {
            current: 'mail',
            visible: false
        };
        this.showDrawer = this.showDrawer.bind(this);
        this.onClose = this.onClose.bind(this);
    }

如果你想在状态改变时隐藏按钮

<Button className={`barsMenu {!this.state.visible ? 'hideBarsMenu' : ''`} type="primary" onClick={this.showDrawer}>
  <span className="barsBtn"></span>
</Button>

并添加一个CSS类

.hideBarsMenu {
  display: none;
}