按钮退出在React中工作(可能是Redux问题)

时间:2018-10-04 23:51:57

标签: reactjs redux

React onClick函数遇到问题。我通过使用mapDispatchToProps获得该功能。我知道redux部分正在工作,因为它以前已经存在,并且我没有更改它,所以我复制并粘贴了(所以起诉我)。我见过其他人有这个问题,通常这与他们有关,要么在呼叫结束时添加(),要么不使用this.props。在手。但是,这些似乎都无法解决问题。这是我的代码:

import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';
import React from 'react'
import {  NavLink, withRouter  } from 'react-router-dom'
import WrappedNormalLoginForm from './Login'
import {  connect  } from 'react-redux'
import * as actions from '../store/actions/auth';
import UserDetailView from '../components/UserInformation'

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;


class CustomLayout extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }

  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
        >
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="1">
            <NavLink to="/" activeClassName="is-active" exact={true}><Icon type="home" />
              <span>Home</span></NavLink>
            </Menu.Item>


            {

              this.props.isAuthenticated ?

              <div><Button onClick={this.props.logout} >Logout</Button></div>
            :
            <div></div>

            }






          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
          {
            this.props.isAuthenticated ?
          <div><Button onClick={this.props.logout} >Logout</Button></div>
          :
          <WrappedNormalLoginForm/>
          }
          </Header>
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>

            </Breadcrumb> 
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              {this.props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>

          </Footer>
        </Layout>
      </Layout>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
      logout: () => dispatch(actions.logout()) 
  }
}


export default withRouter(connect(null, mapDispatchToProps)(CustomLayout));

0 个答案:

没有答案