Fix setState on unmounted component, close #338

src/models/chart.js

@@ -14,10 +14,15 @@ export default {
     salesTypeDataOnline: [],
     salesTypeDataOffline: [],
     radarData: [],
+    loading: false,
   },
 
   effects: {
     *fetch(_, { call, put }) {
+      yield put({
+        type: 'changeLoading',
+        payload: true,
+      });
       const response = yield call(fakeChartData);
       yield put({
         type: 'save',
@@ -40,12 +45,7 @@ export default {
       return {
         ...state,
         ...payload,
-      };
-    },
-    setter(state, { payload }) {
-      return {
-        ...state,
-        ...payload,
+        loading: false,
       };
     },
     clear() {
@@ -62,5 +62,11 @@ export default {
         radarData: [],
       };
     },
+    changeLoading(state, { payload }) {
+      return {
+        ...state,
+        loading: payload,
+      };
+    },
   },
 };

src/routes/Dashboard/Analysis.js

@@ -27,7 +27,6 @@ for (let i = 0; i < 7; i += 1) {
 }))
 export default class Analysis extends Component {
   state = {
-    loading: true,
     salesType: 'all',
     currentTabKey: '',
     rangePickerValue: [],
@@ -36,7 +35,7 @@ export default class Analysis extends Component {
   componentDidMount() {
     this.props.dispatch({
       type: 'chart/fetch',
-    }).then(() => this.setState({ loading: false }));
+    });
   }
 
   componentWillUnmount() {
@@ -90,7 +89,7 @@ export default class Analysis extends Component {
   }
 
   render() {
-    const { rangePickerValue, salesType, currentTabKey, loading } = this.state;
+    const { rangePickerValue, salesType, currentTabKey } = this.state;
     const { chart } = this.props;
     const {
       visitData,
@@ -102,6 +101,7 @@ export default class Analysis extends Component {
       salesTypeData,
       salesTypeDataOnline,
       salesTypeDataOffline,
+      loading,
     } = chart;
 
     const salesPieData = salesType === 'all' ?