fixed #1740 Advanced Form Member Management Cannot Add and Edit

package.json

@@ -32,6 +32,7 @@
     "enquire-js": "^0.2.1",
     "lodash": "^4.17.4",
     "lodash-decorators": "^6.0.0",
+    "lodash.isequal": "^4.5.0",
     "moment": "^2.22.0",
     "numeral": "^2.0.6",
     "omit.js": "^1.0.0",

src/routes/Forms/TableForm.js

@@ -1,5 +1,6 @@
 import React, { PureComponent, Fragment } from 'react';
 import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
+import isEqual from 'lodash.isequal';
 import styles from './style.less';
 
 export default class TableForm extends PureComponent {
@@ -13,17 +14,19 @@ export default class TableForm extends PureComponent {
     this.state = {
       data: props.value,
       loading: false,
-      editData: [],
+      /* eslint-disable-next-line react/no-unused-state */
+      value: props.value,
     };
   }
 
-  static getDerivedStateFromProps(nextProps) {
-    if ('value' in nextProps) {
-      return {
-        data: nextProps.value,
-      };
+  static getDerivedStateFromProps(nextProps, preState) {
+    if (isEqual(nextProps.value, preState.value)) {
+      return null;
     }
-    return null;
+    return {
+      data: nextProps.value,
+      value: nextProps.value,
+    };
   }
 
   getRowByKey(key, newData) {
@@ -47,49 +50,34 @@ export default class TableForm extends PureComponent {
   };
 
   newMember = () => {
-    this.index += 1;
-    this.setState({
-      editData: [
-        {
-          key: `NEW_TEMP_ID_${this.index}`,
-          workId: '',
-          name: '',
-          department: '',
-          editable: true,
-          isNew: true,
-        },
-      ],
+    const { data } = this.state;
+    const newData = data.map(item => ({ ...item }));
+    newData.push({
+      key: `NEW_TEMP_ID_${this.index}`,
+      workId: '',
+      name: '',
+      department: '',
+      editable: true,
+      isNew: true,
     });
+    this.index += 1;
+    this.setState({ data: newData });
   };
 
   remove(key) {
-    const { editData, data } = this.state;
+    const { data } = this.state;
     const { onChange } = this.props;
-    const editItem = editData.find(item => item.key === key);
-    if (editItem && editItem.key) {
-      // 如果存在缓存
-      if (this.cacheOriginData[key]) {
-        data.push(this.cacheOriginData[key]);
-        this.setState(
-          {
-            data,
-          },
-          () => {
-            delete this.cacheOriginData[key];
-          }
-        );
-      }
-      // 从 editData 中删除
-      this.setState({
-        editData: editData.filter(item => item.key !== key),
-      });
-      return;
-    }
     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);
+    }
+  }
+
   handleFieldChange(e, fieldName, key) {
     const { data } = this.state;
     const newData = data.map(item => ({ ...item }));
@@ -101,8 +89,6 @@ export default class TableForm extends PureComponent {
   }
 
   saveRow(e, key) {
-    const { data } = this.state;
-    const { onChange } = this.props;
     e.persist();
     this.setState({
       loading: true,
@@ -121,6 +107,8 @@ export default class TableForm extends PureComponent {
         });
         return;
       }
+      const { data } = this.state;
+      const { onChange } = this.props;
       delete target.isNew;
       this.toggleEditable(e, key);
       onChange(data);
@@ -131,9 +119,9 @@ export default class TableForm extends PureComponent {
   }
 
   cancel(e, key) {
-    const { data } = this.state;
     this.clickedCancel = true;
     e.preventDefault();
+    const { data } = this.state;
     const newData = data.map(item => ({ ...item }));
     const target = this.getRowByKey(key, newData);
     if (this.cacheOriginData[key]) {
@@ -245,14 +233,15 @@ export default class TableForm extends PureComponent {
         },
       },
     ];
-    const { data, editData, loading } = this.state;
-    const dataSource = data.concat(editData);
+
+    const { loading, data } = this.state;
+
     return (
       <Fragment>
         <Table
           loading={loading}
           columns={columns}
-          dataSource={dataSource}
+          dataSource={data}
           pagination={false}
           rowClassName={record => {
             return record.editable ? styles.editable : '';