Question

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

网站输出：

错误：

ps

导航Js：

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.

CSS：

    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;

Answer 1

使用粗箭头表示自动绑定功能

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

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

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

OR

    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;
}

Answer 2

请如下所示更改您的构造函数：

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

在您的代码中，当您编写this.showDrawer（this）时，实际上是使用this作为参数来侵入showDrawer函数。

由于构造函数是在组件安装之前运行的，因此调用showDrawer函数将在其中运行代码并尝试使用setState更新状态，这是不允许的。

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

2 个答案: