这种警告提示需怎么解决呢 reactjs

Question

代码都没写啥，都是直接从antd官网里面照搬复制过来的，点击this.onCollapse这个事件浏览器就会出现警告提示

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

import React from 'react';
import {Layout, Menu, Breadcrumb, Icon} from 'antd';
const {SubMenu} = Menu;
const {Header,Content,Footer,Sider} = Layout;
import './index.less';

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
      openKeys: ['sub1'],
    };
    this.rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
  }
  componentWillMount() {

  }
  onCollapse = (collapsed) => {
    this.setState({collapsed});
  };
  onOpenChange = (openKeys) => {
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
  };

  render() {//  openKeys={this.state.openKeys} onOpenChange={this.onOpenChange}
    return (
      <div>
        <Layout>
          <Header className="header">
            {/*<div className="logo"></div>*/}
            <div style={{color:'#fff',fontWeight:'bold',fontSize:'26px'}}>xxx系统</div>
          </Header>

          <Layout style={{ minHeight: '90vh' }}>

            <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
              {/*<div className="logo" />*/}
              <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                <Menu.Item key="1">
                  <Icon type="pie-chart" />
                  <span>Option 1</span>
                </Menu.Item>
                <Menu.Item key="2">
                  <Icon type="desktop" />
                  <span>Option 2</span>
                </Menu.Item>
                <SubMenu
                  key="sub1"
                  title={<span><Icon type="user" /><span>User</span></span>}
                >
                  <Menu.Item key="3">Tom</Menu.Item>
                  <Menu.Item key="4">Bill</Menu.Item>
                  <Menu.Item key="5">Alex</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub2"
                  title={<span><Icon type="team" /><span>Team</span></span>}
                >
                  <Menu.Item key="6">Team 1</Menu.Item>
                  <Menu.Item key="8">Team 2</Menu.Item>
                </SubMenu>
                <Menu.Item key="9">
                  <Icon type="file" />
                  <span>File</span>
                </Menu.Item>
              </Menu>
            </Sider>

            <Layout style={{padding: '0 24px 24px'}}>

              <Breadcrumb style={{margin: '16px 0'}}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>App</Breadcrumb.Item>
              </Breadcrumb>

              <Content style={{background: '#fff',padding: 24,margin: 0,minHeight: 280}}>
                Content
              </Content>

            </Layout>

          </Layout>

        </Layout>
      </div>
    )
  }
}
export default Index;

Answer 1

我把你的代码跑了一下，没有报错
react 16.8.4
antd 3.20.7
升级一下依赖包 看下还有报错没