diff --git a/src/components/Authorized/PromiseRender.js b/src/components/Authorized/PromiseRender.js
index 02518ad5d0f03b00fdb4cef68ff69e2296130df3..db86efd68531ce096e5e58d116aef3085bcb5a88 100644
--- a/src/components/Authorized/PromiseRender.js
+++ b/src/components/Authorized/PromiseRender.js
@@ -8,7 +8,7 @@ export default class PromiseRender extends React.PureComponent {
componentDidMount() {
this.setRenderComponent(this.props);
}
- componentWillReceiveProps(nextProps) {
+ componentDidUpdate(nextProps) {
// new Props enter
this.setRenderComponent(nextProps);
}
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 2e68fdc6f6aa27e39541acc68c715e813fca683d..0d1c4aca8ca039eb7caa77e6dd1b49b05af0610e 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -22,21 +22,13 @@ export default class Pie extends Component {
window.addEventListener('resize', this.resize);
}
- componentWillReceiveProps(nextProps) {
- if (this.props.data !== nextProps.data) {
+ componentDidUpdate(preProps) {
+ if (this.props.data !== preProps.data) {
// because of charts data create when rendered
// so there is a trick for get rendered time
- this.setState(
- {
- legendData: [...this.state.legendData],
- },
- () => {
- this.getLegendData();
- }
- );
+ this.getLegendData();
}
}
-
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
this.resize.cancel();
diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js
index 588d982457f132f73b784d087eb190d4674ece5b..1131ac222d5a46a13db73690610813f1e026a2bc 100644
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@@ -17,8 +17,8 @@ export default class Radar extends Component {
});
}
- componentWillReceiveProps(nextProps) {
- if (this.props.data !== nextProps.data) {
+ componentDidUpdate(preProps) {
+ if (this.props.data !== preProps.data) {
this.getLengendData();
}
}
diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js
index 1c284ab7a29f2f3325b575ed1403a235c6a65dc9..2c45e05e600c585228710ab0a8c9bac785adf9d7 100644
--- a/src/components/Charts/TagCloud/index.js
+++ b/src/components/Charts/TagCloud/index.js
@@ -26,9 +26,9 @@ class TagCloud extends Component {
window.addEventListener('resize', this.resize);
}
- componentWillReceiveProps(nextProps) {
- if (JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data)) {
- this.renderChart(nextProps);
+ componentDidUpdate(preProps) {
+ if (JSON.stringify(preProps.data) !== JSON.stringify(this.props.data)) {
+ this.renderChart(this.props);
}
}
diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js
index 875fb1e2c588fb58ea0860a828fb5bc863ef143c..ce769121c3c731dcb93b4d60dc28dc42291e7cfd 100644
--- a/src/components/CountDown/index.js
+++ b/src/components/CountDown/index.js
@@ -3,12 +3,40 @@ import React, { Component } from 'react';
function fixedZero(val) {
return val * 1 < 10 ? `0${val}` : val;
}
+const initTime = props => {
+ let lastTime = 0;
+ let targetTime = 0;
+ try {
+ if (Object.prototype.toString.call(props.target) === '[object Date]') {
+ targetTime = props.target.getTime();
+ } else {
+ targetTime = new Date(props.target).getTime();
+ }
+ } catch (e) {
+ throw new Error('invalid target prop', e);
+ }
+
+ lastTime = targetTime - new Date().getTime();
+ return {
+ lastTime: lastTime < 0 ? 0 : lastTime,
+ };
+};
class CountDown extends Component {
+ static getDerivedStateFromProps(nextProps, preState) {
+ const { lastTime } = initTime(nextProps);
+ if (preState.lastTime !== lastTime) {
+ return {
+ lastTime,
+ };
+ }
+ return null;
+ }
+
constructor(props) {
super(props);
- const { lastTime } = this.initTime(props);
+ const { lastTime } = initTime(props);
this.state = {
lastTime,
@@ -19,18 +47,10 @@ class CountDown extends Component {
this.tick();
}
- componentWillReceiveProps(nextProps) {
- if (this.props.target !== nextProps.target) {
+ componentDidUpdate(prevProps) {
+ if (this.props.target !== prevProps.target) {
clearTimeout(this.timer);
- const { lastTime } = this.initTime(nextProps);
- this.setState(
- {
- lastTime,
- },
- () => {
- this.tick();
- }
- );
+ this.tick();
}
}
@@ -40,24 +60,6 @@ class CountDown extends Component {
timer = 0;
interval = 1000;
- initTime = props => {
- let lastTime = 0;
- let targetTime = 0;
- try {
- if (Object.prototype.toString.call(props.target) === '[object Date]') {
- targetTime = props.target.getTime();
- } else {
- targetTime = new Date(props.target).getTime();
- }
- } catch (e) {
- throw new Error('invalid target prop', e);
- }
-
- lastTime = targetTime - new Date().getTime();
- return {
- lastTime: lastTime < 0 ? 0 : lastTime,
- };
- };
// defaultFormat = time => (
// {moment(time).format('hh:mm:ss')}
// );
diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js
index 93c5c235dffda599bb0e59162ade8a2abb03642b..891c72036310a220abb77a3871465701b0e957d0 100644
--- a/src/components/Ellipsis/index.js
+++ b/src/components/Ellipsis/index.js
@@ -54,8 +54,8 @@ export default class Ellipsis extends Component {
}
}
- componentWillReceiveProps(nextProps) {
- if (this.props.lines !== nextProps.lines) {
+ componentDidUpdate(perProps) {
+ if (this.props.lines !== perProps.lines) {
this.computeLine();
}
}
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index c56e7f6979df53d653d9135a827193def903ced0..7822d2d13d65703dc1fbb7a1556745f22d599aa6 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -32,6 +32,15 @@ const Body = ({ children, title, style }) => (
);
class Sidebar extends PureComponent {
+ static getDerivedStateFromProps(nextProps, prevState) {
+ const nextState = {};
+ Object.keys(nextProps).forEach(key => {
+ if (nextProps[key] && prevState[key] !== undefined) {
+ nextState[key] = nextProps[key];
+ }
+ });
+ return nextState;
+ }
constructor(props) {
super(props);
this.defaultstate = {
@@ -48,9 +57,7 @@ class Sidebar extends PureComponent {
const propsState = this.propsToState(props);
this.state = { ...this.defaultstate, ...propsState };
}
- componentWillReceiveProps(props) {
- this.setState(this.propsToState(props));
- }
+
getLayOutSetting = () => {
const { layout } = this.state;
return [
diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index ce23210736c05231bb9dbb27d0a6b2c64c0f43fc..1cfb1a9ab9d9abe719458a4d3aaae47c7f41b4a1 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -8,6 +8,19 @@ import { urlToList } from '../_utils/pathTools';
const { Sider } = Layout;
const { SubMenu } = Menu;
+/**
+ * 获得菜单子节点
+ * @memberof SiderMenu
+ */
+const getDefaultCollapsedSubMenus = props => {
+ const { location: { pathname } } = props;
+ return urlToList(pathname)
+ .map(item => {
+ return getMenuMatches(props.flatMenuKeys, item)[0];
+ })
+ .filter(item => item);
+};
+
// Allow menu.js config icon as string or ReactNode
// icon: 'setting',
// icon: 'http://demo.com/icon.png',
@@ -23,36 +36,18 @@ const getIcon = icon => {
};
export default class SiderMenu extends PureComponent {
+ static getDerivedStateFromProps(nextProps) {
+ return {
+ openKeys: getDefaultCollapsedSubMenus(nextProps),
+ };
+ }
constructor(props) {
super(props);
- this.menus = props.menuData;
- this.flatMenuKeys = this.getFlatMenuKeys(props.menuData);
this.state = {
- openKeys: this.getDefaultCollapsedSubMenus(props),
+ openKeys: getDefaultCollapsedSubMenus(props),
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.location.pathname !== this.props.location.pathname) {
- this.setState({
- openKeys: this.getDefaultCollapsedSubMenus(nextProps),
- });
- }
- }
- /**
- * Recursively flatten the data
- * [{path:string},{path:string}] => {path,path2}
- * @param menus
- */
- getFlatMenuKeys(menus) {
- let keys = [];
- menus.forEach(item => {
- if (item.children) {
- keys = keys.concat(this.getFlatMenuKeys(item.children));
- }
- keys.push(item.path);
- });
- return keys;
- }
+
/**
* Convert pathname to openKeys
* /list/search/articles = > ['list','/list/search']
@@ -123,20 +118,8 @@ export default class SiderMenu extends PureComponent {
return {this.getMenuItemPath(item)};
}
};
- /**
- * 获得菜单子节点
- * @memberof SiderMenu
- */
- getDefaultCollapsedSubMenus(props) {
- const { location: { pathname } } = props || this.props;
- return urlToList(pathname)
- .map(item => {
- return getMenuMatches(this.flatMenuKeys, item)[0];
- })
- .filter(item => item);
- }
isMainMenu = key => {
- return this.menus.some(item => key && (item.key === key || item.path === key));
+ return this.props.menuData.some(item => key && (item.key === key || item.path === key));
};
handleOpenChange = openKeys => {
const lastOpenKey = openKeys[openKeys.length - 1];
diff --git a/src/components/SiderMenu/index.js b/src/components/SiderMenu/index.js
index 001d4872acdb47a319b52317e893683e25fe398e..d950d761a11513531b2f282836fa347c2ffe06aa 100644
--- a/src/components/SiderMenu/index.js
+++ b/src/components/SiderMenu/index.js
@@ -3,6 +3,22 @@ import React from 'react';
import DrawerMenu from 'rc-drawer-menu';
import SiderMenu from './SiderMenu';
+/**
+ * Recursively flatten the data
+ * [{path:string},{path:string}] => {path,path2}
+ * @param menus
+ */
+const getFlatMenuKeys = menuData => {
+ let keys = [];
+ menuData.forEach(item => {
+ if (item.children) {
+ keys = keys.concat(getFlatMenuKeys(item.children));
+ }
+ keys.push(item.path);
+ });
+ return keys;
+};
+
export default props =>
props.isMobile || props.fixSiderbar ? (
}}
width="256px"
>
-
+
) : (
-
+
);
diff --git a/src/components/StandardTable/index.js b/src/components/StandardTable/index.js
index 281d60e6b2f771609ec250f768191b5dbbf749f7..ad3eb1ca7a1c37f51eec4eba97401b3d54aae50b 100644
--- a/src/components/StandardTable/index.js
+++ b/src/components/StandardTable/index.js
@@ -13,6 +13,17 @@ function initTotalList(columns) {
}
class StandardTable extends PureComponent {
+ static getDerivedStateFromProps(nextProps) {
+ // clean state
+ if (nextProps.selectedRows.length === 0) {
+ const needTotalList = initTotalList(nextProps.columns);
+ return {
+ selectedRowKeys: [],
+ needTotalList,
+ };
+ }
+ return null;
+ }
constructor(props) {
super(props);
const { columns } = props;
@@ -24,17 +35,6 @@ class StandardTable extends PureComponent {
};
}
- componentWillReceiveProps(nextProps) {
- // clean state
- if (nextProps.selectedRows.length === 0) {
- const needTotalList = initTotalList(nextProps.columns);
- this.setState({
- selectedRowKeys: [],
- needTotalList,
- });
- }
- }
-
handleRowSelectChange = (selectedRowKeys, selectedRows) => {
let needTotalList = [...this.state.needTotalList];
needTotalList = needTotalList.map(item => {
diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js
index 773b9c841a13fc1d9d8b098ef9ffd1ec66d5277b..c4ea4955acd8133e7416f0a0474700295a257c3a 100644
--- a/src/components/TagSelect/index.js
+++ b/src/components/TagSelect/index.js
@@ -15,16 +15,17 @@ const TagSelectOption = ({ children, checked, onChange, value }) => (
TagSelectOption.isTagSelectOption = true;
class TagSelect extends Component {
- state = {
- expand: false,
- value: this.props.value || this.props.defaultValue || [],
- };
- componentWillReceiveProps(nextProps) {
+ static getDerivedStateFromProps(nextProps) {
if ('value' in nextProps && nextProps.value) {
this.setState({ value: nextProps.value });
}
}
+ state = {
+ expand: false,
+ value: this.props.value || this.props.defaultValue || [],
+ };
+
onChange = value => {
const { onChange } = this.props;
if (!('value' in this.props)) {
diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js
index 0cc07fd16a5f85d1b0f3824fd81877e424c9405c..a758d234bb93ac96bc824633dc4d5b28d42bccec 100644
--- a/src/routes/Forms/TableForm.js
+++ b/src/routes/Forms/TableForm.js
@@ -3,6 +3,14 @@ import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
import styles from './style.less';
export default class TableForm extends PureComponent {
+ static getDerivedStateFromProps(nextProps) {
+ if ('value' in nextProps) {
+ return {
+ data: nextProps.value,
+ };
+ }
+ return null;
+ }
constructor(props) {
super(props);
@@ -11,13 +19,7 @@ export default class TableForm extends PureComponent {
loading: false,
};
}
- componentWillReceiveProps(nextProps) {
- if ('value' in nextProps) {
- this.setState({
- data: nextProps.value,
- });
- }
- }
+
getRowByKey(key, newData) {
return (newData || this.state.data).filter(item => item.key === key)[0];
}
diff --git a/src/routes/User/Register.js b/src/routes/User/Register.js
index 2ebb41cf993d29cab1cee23ec3b086c9f85dcfba..93bb35fbec013104d7894b0d16d16f4d75e1ae64 100644
--- a/src/routes/User/Register.js
+++ b/src/routes/User/Register.js
@@ -34,9 +34,9 @@ export default class Register extends Component {
prefix: '86',
};
- componentWillReceiveProps(nextProps) {
+ componentDidUpdate() {
const account = this.props.form.getFieldValue('mail');
- if (nextProps.register.status === 'ok') {
+ if (this.props.register.status === 'ok') {
this.props.dispatch(
routerRedux.push({
pathname: '/user/register-result',
@@ -47,7 +47,6 @@ export default class Register extends Component {
);
}
}
-
componentWillUnmount() {
clearInterval(this.interval);
}