fix some other eslint error , close #1722

8 years ago · d1b424df1c
33 changed files with 292 additions and 187 deletions
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@ -19,6 +19,14 @@ class Bar extends Component {
    window.removeEventListener('resize', this.resize);
  }

+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleRef = n => {
+    this.node = n;
+  };
+
  @Bind()
  @Debounce(400)
  resize() {
@ -46,14 +54,6 @@ class Bar extends Component {
    }
  }

-  handleRoot = n => {
-    this.root = n;
-  };
-
-  handleRef = n => {
-    this.node = n;
-  };
-
  render() {
    const {
      height,
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@ -25,12 +25,14 @@ export default class Pie extends Component {
  }

  componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+    const { data } = this.props;
+    if (data !== nextProps.data) {
      // because of charts data create when rendered
      // so there is a trick for get rendered time
+      const { legendData } = this.state;
      this.setState(
        {
-          legendData: [...this.state.legendData],
+          legendData: [...legendData],
        },
        () => {
          this.getLegendData();
@ -67,28 +69,6 @@ export default class Pie extends Component {
    });
  };

-  // for window resize auto responsive legend
-  @Bind()
-  @Debounce(300)
-  resize() {
-    const { hasLegend } = this.props;
-    if (!hasLegend || !this.root) {
-      window.removeEventListener('resize', this.resize);
-      return;
-    }
-    if (this.root.parentNode.clientWidth <= 380) {
-      if (!this.state.legendBlock) {
-        this.setState({
-          legendBlock: true,
-        });
-      }
-    } else if (this.state.legendBlock) {
-      this.setState({
-        legendBlock: false,
-      });
-    }
-  }
-
  handleRoot = n => {
    this.root = n;
  };
@ -111,6 +91,29 @@ export default class Pie extends Component {
    });
  };

+  // for window resize auto responsive legend
+  @Bind()
+  @Debounce(300)
+  resize() {
+    const { hasLegend } = this.props;
+    if (!hasLegend || !this.root) {
+      window.removeEventListener('resize', this.resize);
+      return;
+    }
+    const { legendBlock } = this.state;
+    if (this.root.parentNode.clientWidth <= 380) {
+      if (!legendBlock) {
+        this.setState({
+          legendBlock: true,
+        });
+      }
+    } else if (legendBlock) {
+      this.setState({
+        legendBlock: false,
+      });
+    }
+  }
+
  render() {
    const {
      valueFormat,
@ -135,10 +138,16 @@ export default class Pie extends Component {
      [styles.legendBlock]: legendBlock,
    });

+    const { data: d, selected: s, tooltip: t } = this.props;
+
+    let data = d || [];
+    let selected = s || true;
+    let tooltip = t || true;
+
    const defaultColors = colors;
-    let data = this.props.data || [];
-    let selected = this.props.selected || true;
-    let tooltip = this.props.tooltip || true;
+    // let data = this.props.data || [];
+    // let selected = this.props.selected || true;
+    // let tooltip = this.props.tooltip || true;
    let formatColor;

    const scale = {
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@ -16,7 +16,8 @@ export default class Radar extends Component {
  }

  componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+    const { data } = this.props;
+    if (data !== nextProps.data) {
      this.getLengendData();
    }
  }
--- a/src/components/Charts/TagCloud/index.js
+++ b/src/components/Charts/TagCloud/index.js
@ -25,7 +25,8 @@ class TagCloud extends Component {
  }

  componentWillReceiveProps(nextProps) {
-    if (JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data)) {
+    const { data } = this.props;
+    if (JSON.stringify(nextProps.data) !== JSON.stringify(data)) {
      this.renderChart(nextProps);
    }
  }
--- a/src/components/CountDown/index.js
+++ b/src/components/CountDown/index.js
@ -5,6 +5,10 @@ function fixedZero(val) {
 }

 class CountDown extends Component {
+  timer = 0;
+
+  interval = 1000;
+
  constructor(props) {
    super(props);

@ -20,7 +24,8 @@ class CountDown extends Component {
  }

  componentWillReceiveProps(nextProps) {
-    if (this.props.target !== nextProps.target) {
+    const { target } = this.props;
+    if (target !== nextProps.target) {
      clearTimeout(this.timer);
      const { lastTime } = this.initTime(nextProps);
      this.setState(
@ -38,10 +43,6 @@ class CountDown extends Component {
    clearTimeout(this.timer);
  }

-  timer = 0;
-
-  interval = 1000;
-
  initTime = props => {
    let lastTime = 0;
    let targetTime = 0;
--- a/src/components/EditableItem/index.js
+++ b/src/components/EditableItem/index.js
@ -3,10 +3,13 @@ import { Input, Icon } from 'antd';
 import styles from './index.less';

 export default class EditableItem extends PureComponent {
-  state = {
-    value: this.props.value,
-    editable: false,
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
+      editable: false,
+    };
+  }

  handleChange = e => {
    const { value } = e.target;
@ -15,8 +18,10 @@ export default class EditableItem extends PureComponent {

  check = () => {
    this.setState({ editable: false });
-    if (this.props.onChange) {
-      this.props.onChange(this.state.value);
+    const { onChange } = this.props;
+    const { value } = this.state;
+    if (onChange) {
+      onChange(value);
    }
  };

--- a/src/components/Ellipsis/index.js
+++ b/src/components/Ellipsis/index.js
@ -84,7 +84,8 @@ export default class Ellipsis extends Component {
  }

  componentWillReceiveProps(nextProps) {
-    if (this.props.lines !== nextProps.lines) {
+    const { lines } = this.props;
+    if (lines !== nextProps.lines) {
      this.computeLine();
    }
  }
--- a/src/components/HeaderSearch/index.js
+++ b/src/components/HeaderSearch/index.js
@ -27,10 +27,13 @@ export default class HeaderSearch extends PureComponent {
    defaultOpen: false,
  };

-  state = {
-    searchMode: this.props.defaultOpen,
-    value: '',
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchMode: props.defaultOpen,
+      value: '',
+    };
+  }

  onKeyDown = e => {
    if (e.key === 'Enter') {
@ -40,24 +43,16 @@ export default class HeaderSearch extends PureComponent {

  onChange = value => {
    this.setState({ value });
-    if (this.props.onChange) {
-      this.props.onChange();
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange();
    }
  };

-  // NOTE: 不能小于500，如果长按某键，第一次触发auto repeat的间隔是500ms，小于500会导致触发2次
-  @Bind()
-  @Debounce(500, {
-    leading: true,
-    trailing: false,
-  })
-  debouncePressEnter() {
-    this.props.onPressEnter(this.state.value);
-  }
-
  enterSearchMode = () => {
    this.setState({ searchMode: true }, () => {
-      if (this.state.searchMode) {
+      const { searchMode } = this.state;
+      if (searchMode) {
        this.input.focus();
      }
    });
@ -70,11 +65,24 @@ export default class HeaderSearch extends PureComponent {
    });
  };

+  debouncePressEnter() {
+    const { onPressEnter } = this.props;
+    const { value } = this.state;
+    onPressEnter(value);
+  }
+
+  // NOTE: 不能小于500，如果长按某键，第一次触发auto repeat的间隔是500ms，小于500会导致触发2次
+  @Bind()
+  @Debounce(500, {
+    leading: true,
+    trailing: false,
+  })
  render() {
    const { className, placeholder, ...restProps } = this.props;
+    const { searchMode, value } = this.state;
    delete restProps.defaultOpen; // for rc-select not affected
    const inputClass = classNames(styles.input, {
-      [styles.show]: this.state.searchMode,
+      [styles.show]: searchMode,
    });
    return (
      <span className={classNames(className, styles.headerSearch)} onClick={this.enterSearchMode}>
@ -83,7 +91,7 @@ export default class HeaderSearch extends PureComponent {
          key="AutoComplete"
          {...restProps}
          className={inputClass}
-          value={this.state.value}
+          value={value}
          onChange={this.onChange}
        >
          <Input
--- a/src/components/Login/LoginItem.js
+++ b/src/components/Login/LoginItem.js
@ -23,8 +23,10 @@ function generator({ defaultProps, defaultRules, type }) {
      }

      componentDidMount() {
-        if (this.context.updateActive) {
-          this.context.updateActive(this.props.name);
+        const { updateActive } = this.context;
+        const { name } = this.props;
+        if (updateActive) {
+          updateActive(name);
        }
      }

@ -35,8 +37,9 @@ function generator({ defaultProps, defaultRules, type }) {
      onGetCaptcha = () => {
        let count = 59;
        this.setState({ count });
-        if (this.props.onGetCaptcha) {
-          this.props.onGetCaptcha();
+        const { onGetCaptcha } = this.props;
+        if (onGetCaptcha) {
+          onGetCaptcha();
        }
        this.interval = setInterval(() => {
          count -= 1;
@ -48,7 +51,8 @@ function generator({ defaultProps, defaultRules, type }) {
      };

      render() {
-        const { getFieldDecorator } = this.context.form;
+        const { form } = this.context;
+        const { getFieldDecorator } = form;
        const options = {};
        let otherProps = {};
        const { onChange, defaultValue, rules, name, ...restProps } = this.props;
--- a/src/components/Login/LoginTab.js
+++ b/src/components/Login/LoginTab.js
@ -25,8 +25,9 @@ export default class LoginTab extends Component {
  }

  componentWillMount() {
-    if (this.context.tabUtil) {
-      this.context.tabUtil.addTab(this.uniqueId);
+    const { tabUtil } = this.context;
+    if (tabUtil) {
+      tabUtil.addTab(this.uniqueId);
    }
  }

--- a/src/components/Login/index.js
+++ b/src/components/Login/index.js
@ -28,27 +28,32 @@ class Login extends Component {
    onSubmit: () => {},
  };

-  state = {
-    type: this.props.defaultActiveKey,
-    tabs: [],
-    active: {},
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      type: props.defaultActiveKey,
+      tabs: [],
+      active: {},
+    };
+  }

  getChildContext() {
+    const { tabs } = this.state;
+    const { form } = this.props;
    return {
      tabUtil: {
        addTab: id => {
          this.setState({
-            tabs: [...this.state.tabs, id],
+            tabs: [...tabs, id],
          });
        },
        removeTab: id => {
          this.setState({
-            tabs: this.state.tabs.filter(currentId => currentId !== id),
+            tabs: tabs.filter(currentId => currentId !== id),
          });
        },
      },
-      form: this.props.form,
+      form,
      updateActive: activeItem => {
        const { type, active } = this.state;
        if (active[type]) {
@ -64,18 +69,20 @@ class Login extends Component {
  }

  onSwitch = type => {
+    const { onTabChange } = this.props;
    this.setState({
      type,
    });
-    this.props.onTabChange(type);
+    onTabChange(type);
  };

  handleSubmit = e => {
    e.preventDefault();
    const { active, type } = this.state;
+    const { form, onSubmit } = this.props;
    const activeFileds = active[type];
-    this.props.form.validateFields(activeFileds, { force: true }, (err, values) => {
-      this.props.onSubmit(err, values);
+    form.validateFields(activeFileds, { force: true }, (err, values) => {
+      onSubmit(err, values);
    });
  };

--- a/src/components/NoticeIcon/index.js
+++ b/src/components/NoticeIcon/index.js
@ -37,11 +37,12 @@ export default class NoticeIcon extends PureComponent {

  onTabChange = tabType => {
    this.setState({ tabType });
-    this.props.onTabChange(tabType);
+    const { onTabChange } = this.state;
+    onTabChange(tabType);
  };

  getNotificationBox() {
-    const { children, loading, locale } = this.props;
+    const { children, loading, locale, onClear } = this.props;
    if (!children) {
      return null;
    }
@ -56,7 +57,7 @@ export default class NoticeIcon extends PureComponent {
            {...child.props}
            data={child.props.list}
            onClick={item => this.onItemClick(item, child.props)}
-            onClear={() => this.props.onClear(child.props.title)}
+            onClear={() => onClear(child.props.title)}
            title={child.props.title}
            locale={locale}
          />
@ -73,7 +74,7 @@ export default class NoticeIcon extends PureComponent {
  }

  render() {
-    const { className, count, popupAlign, onPopupVisibleChange } = this.props;
+    const { className, count, popupAlign, onPopupVisibleChange, popupVisible } = this.props;
    const noticeButtonClass = classNames(className, styles.noticeButton);
    const notificationBox = this.getNotificationBox();
    const trigger = (
@ -88,7 +89,7 @@ export default class NoticeIcon extends PureComponent {
    }
    const popoverProps = {};
    if ('popupVisible' in this.props) {
-      popoverProps.visible = this.props.popupVisible;
+      popoverProps.visible = popupVisible;
    }
    return (
      <Popover
--- a/src/components/PageHeader/index.js
+++ b/src/components/PageHeader/index.js
@ -36,23 +36,32 @@ export default class PageHeader extends PureComponent {
  }

  componentDidUpdate(preProps) {
-    if (preProps.tabActiveKey !== this.props.tabActiveKey) {
+    const { tabActiveKey } = this.props;
+    if (preProps.tabActiveKey !== tabActiveKey) {
      this.getBreadcrumbDom();
    }
  }

  onChange = key => {
-    if (this.props.onTabChange) {
-      this.props.onTabChange(key);
+    const { onTabChange } = this.props;
+    if (onTabChange) {
+      onTabChange(key);
    }
  };

  getBreadcrumbProps = () => {
+    const { routes, params, location, breadcrumbNameMap } = this.props;
+    const {
+      routes: croutes,
+      params: cparams,
+      location: clocation,
+      breadcrumbNameMap: cbreadcrumbNameMap,
+    } = this.context;
    return {
-      routes: this.props.routes || this.context.routes,
-      params: this.props.params || this.context.params,
-      routerLocation: this.props.location || this.context.location,
-      breadcrumbNameMap: this.props.breadcrumbNameMap || this.context.breadcrumbNameMap,
+      routes: routes || croutes,
+      params: params || cparams,
+      routerLocation: location || clocation,
+      breadcrumbNameMap: breadcrumbNameMap || cbreadcrumbNameMap,
    };
  };

@ -185,6 +194,7 @@ export default class PageHeader extends PureComponent {
      tabDefaultActiveKey,
      tabBarExtraContent,
    } = this.props;
+    const { breadcrumb } = this.state;

    const clsString = classNames(styles.pageHeader, className);
    const activeKeyProps = {};
@ -197,7 +207,7 @@ export default class PageHeader extends PureComponent {

    return (
      <div className={clsString}>
-        {this.state.breadcrumb}
+        {breadcrumb}
        <div className={styles.detail}>
          {logo && <div className={styles.logo}>{logo}</div>}
          <div className={styles.main}>
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@ -59,7 +59,8 @@ export default class SiderMenu extends PureComponent {
  }

  componentWillReceiveProps(nextProps) {
-    if (nextProps.location.pathname !== this.props.location.pathname) {
+    const { location } = this.props;
+    if (nextProps.location.pathname !== location.pathname) {
      this.setState({
        openKeys: this.getDefaultCollapsedSubMenus(nextProps),
      });
@ -97,15 +98,16 @@ export default class SiderMenu extends PureComponent {
        </a>
      );
    }
+    const { location, isMobile, onCollapse } = this.props;
    return (
      <Link
        to={itemPath}
        target={target}
-        replace={itemPath === this.props.location.pathname}
+        replace={itemPath === location.pathname}
        onClick={
-          this.props.isMobile
+          isMobile
            ? () => {
-                this.props.onCollapse(true);
+                onCollapse(true);
              }
            : undefined
        }
@ -186,8 +188,9 @@ export default class SiderMenu extends PureComponent {

  // permission to check
  checkPermissionItem = (authority, ItemDom) => {
-    if (this.props.Authorized && this.props.Authorized.check) {
-      const { check } = this.props.Authorized;
+    const { Authorized } = this.props;
+    if (Authorized && Authorized.check) {
+      const { check } = Authorized;
      return check(authority, ItemDom);
    }
    return ItemDom;
--- a/src/components/SiderMenu/index.js
+++ b/src/components/SiderMenu/index.js
@ -3,24 +3,26 @@ import React from 'react';
 import DrawerMenu from 'rc-drawer';
 import SiderMenu from './SiderMenu';

-const SiderMenuWrapper = props =>
-  props.isMobile ? (
+const SiderMenuWrapper = props => {
+  const { isMobile, collapsed } = props;
+  return isMobile ? (
    <DrawerMenu
      getContainer={null}
      level={null}
      handleChild={<i className="drawer-handle-icon" />}
      onHandleClick={() => {
-        props.onCollapse(!props.collapsed);
+        props.onCollapse(!collapsed);
      }}
-      open={!props.collapsed}
+      open={!collapsed}
      onMaskClick={() => {
        props.onCollapse(true);
      }}
    >
-      <SiderMenu {...props} collapsed={props.isMobile ? false : props.collapsed} />
+      <SiderMenu {...props} collapsed={isMobile ? false : collapsed} />
    </DrawerMenu>
  ) : (
    <SiderMenu {...props} />
  );
+};

 export default SiderMenuWrapper;
--- a/src/components/StandardTable/index.js
+++ b/src/components/StandardTable/index.js
@ -36,7 +36,9 @@ class StandardTable extends PureComponent {
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
-    let needTotalList = [...this.state.needTotalList];
+    const { needTotalList: list } = this.state;
+    const { onSelectRow } = this.props;
+    let needTotalList = [...list];
    needTotalList = needTotalList.map(item => {
      return {
        ...item,
@ -46,15 +48,16 @@ class StandardTable extends PureComponent {
      };
    });

-    if (this.props.onSelectRow) {
-      this.props.onSelectRow(selectedRows);
+    if (onSelectRow) {
+      onSelectRow(selectedRows);
    }

    this.setState({ selectedRowKeys, needTotalList });
  };

  handleTableChange = (pagination, filters, sorter) => {
-    this.props.onChange(pagination, filters, sorter);
+    const { onChange } = this.props;
+    onChange(pagination, filters, sorter);
  };

  cleanSelectedKeys = () => {
--- a/src/components/TagSelect/index.js
+++ b/src/components/TagSelect/index.js
@ -15,10 +15,13 @@ const TagSelectOption = ({ children, checked, onChange, value }) => (
 TagSelectOption.isTagSelectOption = true;

 class TagSelect extends Component {
-  state = {
-    expand: false,
-    value: this.props.value || this.props.defaultValue || [],
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      expand: false,
+      value: props.value || props.defaultValue || [],
+    };
+  }

  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps && nextProps.value) {
@ -54,7 +57,8 @@ class TagSelect extends Component {
  }

  handleTagChange = (value, checked) => {
-    const checkedTags = [...this.state.value];
+    const { value: v } = this.state;
+    const checkedTags = [...v];

    const index = checkedTags.indexOf(value);
    if (checked && index === -1) {
@ -66,8 +70,9 @@ class TagSelect extends Component {
  };

  handleExpand = () => {
+    const { expand } = this.state;
    this.setState({
-      expand: !this.state.expand,
+      expand: !expand,
    });
  };

--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@ -108,7 +108,8 @@ class BasicLayout extends React.PureComponent {
        isMobile: mobile,
      });
    });
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'user/fetchCurrent',
    });
  }
@ -156,7 +157,8 @@ class BasicLayout extends React.PureComponent {
  };

  handleMenuCollapse = collapsed => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'global/changeLayoutCollapsed',
      payload: collapsed,
    });
@ -164,27 +166,30 @@ class BasicLayout extends React.PureComponent {

  handleNoticeClear = type => {
    message.success(`清空了${type}`);
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'global/clearNotices',
      payload: type,
    });
  };

  handleMenuClick = ({ key }) => {
+    const { dispatch } = this.props;
    if (key === 'triggerError') {
-      this.props.dispatch(routerRedux.push('/exception/trigger'));
+      dispatch(routerRedux.push('/exception/trigger'));
      return;
    }
    if (key === 'logout') {
-      this.props.dispatch({
+      dispatch({
        type: 'login/logout',
      });
    }
  };

  handleNoticeVisibleChange = visible => {
+    const { dispatch } = this.props;
    if (visible) {
-      this.props.dispatch({
+      dispatch({
        type: 'global/fetchNotices',
      });
    }
@ -200,6 +205,7 @@ class BasicLayout extends React.PureComponent {
      match,
      location,
    } = this.props;
+    const { isMobile: mb } = this.state;
    const bashRedirect = this.getBaseRedirect();
    const layout = (
      <Layout>
@ -212,7 +218,7 @@ class BasicLayout extends React.PureComponent {
          menuData={getMenuData()}
          collapsed={collapsed}
          location={location}
-          isMobile={this.state.isMobile}
+          isMobile={mb}
          onCollapse={this.handleMenuCollapse}
        />
        <Layout>
@ -223,7 +229,7 @@ class BasicLayout extends React.PureComponent {
              fetchingNotices={fetchingNotices}
              notices={notices}
              collapsed={collapsed}
-              isMobile={this.state.isMobile}
+              isMobile={mb}
              onNoticeClear={this.handleNoticeClear}
              onCollapse={this.handleMenuCollapse}
              onMenuClick={this.handleMenuClick}
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@ -44,8 +44,8 @@ for (let i = 0; i < 7; i += 1) {

 const Yuan = ({ children }) => (
  <span
-    dangerouslySetInnerHTML={{ __html: yuan(children) }}
-  /> /* eslint-disable-line react/no-danger */
+    dangerouslySetInnerHTML={{ __html: yuan(children) }} /* eslint-disable-line react/no-danger */
+  />
 );

@connect(({ chart, loading }) => ({
@ -60,7 +60,8 @@ export default class Analysis extends Component {
  };

  componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'chart/fetch',
    });
  }
@ -89,7 +90,8 @@ export default class Analysis extends Component {
      rangePickerValue,
    });

-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'chart/fetchSalesData',
    });
  };
@ -99,7 +101,8 @@ export default class Analysis extends Component {
      rangePickerValue: getTimeDistance(type),
    });

-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'chart/fetchSalesData',
    });
  };
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@ -25,7 +25,8 @@ const havePermissionAsync = new Promise(resolve => {
 }))
 export default class Monitor extends PureComponent {
  componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'monitor/fetchTags',
    });
  }
--- a/src/routes/Exception/triggerException.js
+++ b/src/routes/Exception/triggerException.js
@ -15,7 +15,8 @@ export default class TriggerException extends PureComponent {
    this.setState({
      isloading: true,
    });
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'error/query',
      payload: {
        code,
@ -24,9 +25,10 @@ export default class TriggerException extends PureComponent {
  };

  render() {
+    const { isloading } = this.state;
    return (
      <Card>
-        <Spin spinning={this.state.isloading} wrapperClassName={styles.trigger}>
+        <Spin spinning={isloading} wrapperClassName={styles.trigger}>
          <Button type="danger" onClick={() => this.triggerError(401)}>
            触发401
          </Button>
--- a/src/routes/Forms/AdvancedForm.js
+++ b/src/routes/Forms/AdvancedForm.js
@ -73,12 +73,14 @@ class AdvancedForm extends PureComponent {
  resizeFooterToolbar = () => {
    const sider = document.querySelectorAll('.ant-layout-sider')[0];
    const width = `calc(100% - ${sider.style.width})`;
-    if (this.state.width !== width) {
+    const { width: w } = this.state;
+    if (w !== width) {
      this.setState({ width });
    }
  };

  render() {
+    const { width: w } = this.state;
    const { form, dispatch, submitting } = this.props;
    const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form;
    const validate = () => {
@ -287,7 +289,7 @@ class AdvancedForm extends PureComponent {
            initialValue: tableData,
          })(<TableForm />)}
        </Card>
-        <FooterToolbar style={{ width: this.state.width }}>
+        <FooterToolbar style={{ width: w }}>
          {getErrorInfo()}
          <Button type="primary" onClick={validate} loading={submitting}>
            提交
--- a/src/routes/Forms/BasicForm.js
+++ b/src/routes/Forms/BasicForm.js
@ -27,9 +27,10 @@ const { TextArea } = Input;
 export default class BasicForms extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
-    this.props.form.validateFieldsAndScroll((err, values) => {
+    const { form, dispatch } = this.props;
+    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
-        this.props.dispatch({
+        dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
@ -38,8 +39,8 @@ export default class BasicForms extends PureComponent {
  };

  render() {
-    const { submitting } = this.props;
-    const { getFieldDecorator, getFieldValue } = this.props.form;
+    const { submitting, form } = this.props;
+    const { getFieldDecorator, getFieldValue } = form;

    const formItemLayout = {
      labelCol: {
--- a/src/routes/Forms/TableForm.js
+++ b/src/routes/Forms/TableForm.js
@ -3,6 +3,10 @@ import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
 import styles from './style.less';

 export default class TableForm extends PureComponent {
+  index = 0;
+
+  cacheOriginData = {};
+
  constructor(props) {
    super(props);

@ -21,16 +25,14 @@ export default class TableForm extends PureComponent {
  }

  getRowByKey(key, newData) {
-    return (newData || this.state.data).filter(item => item.key === key)[0];
+    const { data } = this.state;
+    return (newData || data).filter(item => item.key === key)[0];
  }

-  index = 0;
-
-  cacheOriginData = {};
-
  toggleEditable = (e, key) => {
    e.preventDefault();
-    const newData = this.state.data.map(item => ({ ...item }));
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
    const target = this.getRowByKey(key, newData);
    if (target) {
      // 进入编辑状态时保存原始数据
@ -42,14 +44,9 @@ export default class TableForm extends PureComponent {
    }
  };

-  remove(key) {
-    const newData = this.state.data.filter(item => item.key !== key);
-    this.setState({ data: newData });
-    this.props.onChange(newData);
-  }
-
  newMember = () => {
-    const newData = this.state.data.map(item => ({ ...item }));
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
    newData.push({
      key: `NEW_TEMP_ID_${this.index}`,
      workId: '',
@ -62,6 +59,14 @@ export default class TableForm extends PureComponent {
    this.setState({ data: newData });
  };

+  remove(key) {
+    const { data } = this.state;
+    const { onChange } = this.props;
+    const newData = data.filter(item => item.key !== key);
+    this.setState({ data: newData });
+    onChange(newData);
+  }
+
  handleKeyPress(e, key) {
    if (e.key === 'Enter') {
      this.saveRow(e, key);
@ -69,7 +74,8 @@ export default class TableForm extends PureComponent {
  }

  handleFieldChange(e, fieldName, key) {
-    const newData = this.state.data.map(item => ({ ...item }));
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
    const target = this.getRowByKey(key, newData);
    if (target) {
      target[fieldName] = e.target.value;
@ -96,9 +102,11 @@ export default class TableForm extends PureComponent {
        });
        return;
      }
+      const { data } = this.state;
+      const { onChange } = this.props;
      delete target.isNew;
      this.toggleEditable(e, key);
-      this.props.onChange(this.state.data);
+      onChange(data);
      this.setState({
        loading: false,
      });
@ -108,7 +116,8 @@ export default class TableForm extends PureComponent {
  cancel(e, key) {
    this.clickedCancel = true;
    e.preventDefault();
-    const newData = this.state.data.map(item => ({ ...item }));
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
    const target = this.getRowByKey(key, newData);
    if (this.cacheOriginData[key]) {
      Object.assign(target, this.cacheOriginData[key]);
@ -183,7 +192,8 @@ export default class TableForm extends PureComponent {
        title: '操作',
        key: 'action',
        render: (text, record) => {
-          if (!!record.editable && this.state.loading) {
+          const { loading } = this.state;
+          if (!!record.editable && loading) {
            return null;
          }
          if (record.editable) {
@ -219,12 +229,14 @@ export default class TableForm extends PureComponent {
      },
    ];

+    const { loading, data } = this.state;
+
    return (
      <Fragment>
        <Table
-          loading={this.state.loading}
+          loading={loading}
          columns={columns}
-          dataSource={this.state.data}
+          dataSource={data}
          pagination={false}
          rowClassName={record => {
            return record.editable ? styles.editable : '';
--- a/src/routes/List/Applications.js
+++ b/src/routes/List/Applications.js
@ -36,7 +36,8 @@ const formatWan = val => {
 }))
 export default class FilterCardList extends PureComponent {
  componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'list/fetch',
      payload: {
        count: 8,
--- a/src/routes/List/Articles.js
+++ b/src/routes/List/Articles.js
@ -30,7 +30,8 @@ export default class SearchList extends Component {
  };

  fetchMore = () => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'list/appendFetch',
      payload: {
        count: pageSize,
--- a/src/routes/List/BasicList.js
+++ b/src/routes/List/BasicList.js
@ -30,7 +30,8 @@ const { Search } = Input;
 }))
 export default class BasicList extends PureComponent {
  componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'list/fetch',
      payload: {
        count: 5,
--- a/src/routes/List/CardList.js
+++ b/src/routes/List/CardList.js
@ -13,7 +13,8 @@ import styles from './CardList.less';
 }))
 export default class CardList extends PureComponent {
  componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'list/fetch',
      payload: {
        count: 8,
--- a/src/routes/List/Projects.js
+++ b/src/routes/List/Projects.js
@ -21,7 +21,8 @@ const FormItem = Form.Item;
 }))
 export default class CoverCardList extends PureComponent {
  componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'list/fetch',
      payload: {
        count: 8,
--- a/src/routes/List/TableList.js
+++ b/src/routes/List/TableList.js
@ -117,8 +117,9 @@ export default class TableList extends PureComponent {
  };

  toggleForm = () => {
+    const { expandForm } = this.state;
    this.setState({
-      expandForm: !this.state.expandForm,
+      expandForm: !expandForm,
    });
  };

@ -184,7 +185,8 @@ export default class TableList extends PureComponent {
  };

  handleAdd = fields => {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
      type: 'rule/add',
      payload: {
        description: fields.desc,
@ -198,7 +200,8 @@ export default class TableList extends PureComponent {
  };

  renderSimpleForm() {
-    const { getFieldDecorator } = this.props.form;
+    const { form } = this.props;
+    const { getFieldDecorator } = form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
@ -236,7 +239,8 @@ export default class TableList extends PureComponent {
  }

  renderAdvancedForm() {
-    const { getFieldDecorator } = this.props.form;
+    const { form } = this.props;
+    const { getFieldDecorator } = form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
@ -308,7 +312,8 @@ export default class TableList extends PureComponent {
  }

  renderForm() {
-    return this.state.expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
+    const { expandForm } = this.state;
+    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
--- a/src/routes/Profile/AdvancedProfile.js
+++ b/src/routes/Profile/AdvancedProfile.js
@ -226,7 +226,7 @@ export default class AdvancedProfile extends Component {
  }

  render() {
-    const { stepDirection } = this.state;
+    const { stepDirection, operationkey } = this.state;
    const { profile, loading } = this.props;
    const { advancedOperation1, advancedOperation2, advancedOperation3 } = profile;
    const contentList = {
@ -343,7 +343,7 @@ export default class AdvancedProfile extends Component {
          tabList={operationTabList}
          onTabChange={this.onOperationTabChange}
        >
-          {contentList[this.state.operationkey]}
+          {contentList[operationkey]}
        </Card>
      </PageHeaderLayout>
    );
--- a/src/routes/User/Login.js
+++ b/src/routes/User/Login.js
@ -23,8 +23,9 @@ export default class LoginPage extends Component {

  handleSubmit = (err, values) => {
    const { type } = this.state;
+    const { dispatch } = this.props;
    if (!err) {
-      this.props.dispatch({
+      dispatch({
        type: 'login/login',
        payload: {
          ...values,
@ -46,7 +47,7 @@ export default class LoginPage extends Component {

  render() {
    const { login, submitting } = this.props;
-    const { type } = this.state;
+    const { type, autoLogin } = this.state;
    return (
      <div className={styles.main}>
        <Login defaultActiveKey={type} onTabChange={this.onTabChange} onSubmit={this.handleSubmit}>
@ -67,7 +68,7 @@ export default class LoginPage extends Component {
            <Captcha name="captcha" />
          </Tab>
          <div>
-            <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
+            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
              自动登录
            </Checkbox>
            <a style={{ float: 'right' }} href="">
--- a/src/routes/User/Register.js
+++ b/src/routes/User/Register.js
@ -35,9 +35,10 @@ export default class Register extends Component {
  };

  componentWillReceiveProps(nextProps) {
-    const account = this.props.form.getFieldValue('mail');
+    const { form, dispatch } = this.props;
+    const account = form.getFieldValue('mail');
    if (nextProps.register.status === 'ok') {
-      this.props.dispatch(
+      dispatch(
        routerRedux.push({
          pathname: '/user/register-result',
          state: {
@ -78,13 +79,15 @@ export default class Register extends Component {

  handleSubmit = e => {
    e.preventDefault();
-    this.props.form.validateFields({ force: true }, (err, values) => {
+    const { form, dispatch } = this.props;
+    form.validateFields({ force: true }, (err, values) => {
+      const { prefix } = this.state;
      if (!err) {
-        this.props.dispatch({
+        dispatch({
          type: 'register/submit',
          payload: {
            ...values,
-            prefix: this.state.prefix,
+            prefix,
          },
        });
      }
@ -93,7 +96,8 @@ export default class Register extends Component {

  handleConfirmBlur = e => {
    const { value } = e.target;
-    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
+    const { confirmDirty } = this.state;
+    this.setState({ confirmDirty: confirmDirty || !!value });
  };

  checkConfirm = (rule, value, callback) => {
@ -116,7 +120,8 @@ export default class Register extends Component {
      this.setState({
        help: '',
      });
-      if (!this.state.visible) {
+      const { visible, confirmDirty } = this.state;
+      if (!visible) {
        this.setState({
          visible: !!value,
        });
@ -125,7 +130,7 @@ export default class Register extends Component {
        callback('error');
      } else {
        const { form } = this.props;
-        if (value && this.state.confirmDirty) {
+        if (value && confirmDirty) {
          form.validateFields(['confirm'], { force: true });
        }
        callback();
@ -159,7 +164,7 @@ export default class Register extends Component {
  render() {
    const { form, submitting } = this.props;
    const { getFieldDecorator } = form;
-    const { count, prefix } = this.state;
+    const { count, prefix, help, visible } = this.state;
    return (
      <div className={styles.main}>
        <h3>注册</h3>
@ -178,7 +183,7 @@ export default class Register extends Component {
              ],
            })(<Input size="large" placeholder="邮箱" />)}
          </FormItem>
-          <FormItem help={this.state.help}>
+          <FormItem help={help}>
            <Popover
              content={
                <div style={{ padding: '4px 0' }}>
@ -191,7 +196,7 @@ export default class Register extends Component {
              }
              overlayStyle={{ width: 240 }}
              placement="right"
-              visible={this.state.visible}
+              visible={visible}
            >
              {getFieldDecorator('password', {
                rules: [