ProComponents中的可编辑表格插件

Question

EditableProTable - 可编辑表格
在新增页面中设置了可编辑表格 第一次新增时可编辑表格内容还是空的，但是第二次打开新增时可编辑表格默认有了上一次编辑的内容， 刷新页面重新进入新增页面可编辑表格才回归正常显示为空，请问这种情况怎么避免啊？

const columns = [
{
  title: '题目1',
  dataIndex: 'title',
  initialValue: '',
  valueType: 'select',
  valueEnum: additionEnum
}, {
  title: '类型',
  dataIndex: 'type'
}, {
  title: '题目2',
  dataIndex: 'titleTwo',
  valueType: 'select',
  valueEnum: {
    '1': { text: '产品线1' },
    '2': { text: '产品线2' },
    '3': { text: '产品线3' }
  }
}, {
  title: '题目3',
  dataIndex: 'titleThree',
},  {
  title: '操作',
  valueType: 'option',
  // width: 200,
  render: (text, record, _, action) => [
    <a key="editable" onClick={() => {
          var _a;
          (_a = action === null || action === void 0 ? void 0 :         action.startEditable) === null || _a === void 0 ? void 0 : _a.call(action,     record.id);
      setSave(false)
      console.log(text)
    }}>
      编辑
  </a>,
    <a key="delete" onClick={() => {
      setData(dataSource.filter((item) => item.id !== record.id));
    }}>
      删除
  </a>
   ],
},
  ]

<EditableProTable rowKey="id" actionRef={actionRef} headerTitle="新增题目" maxLength={5}
      // 关闭默认的新建按钮
      recordCreatorProps={false} columns={columns} request={async () => ({
        data: dataSource,
        total: 3,
        success: true,
      })} value={dataSource} onChange={setData} editable={{
        editableKeys,
        type: "multiple",
        onSave: async () => {
          setSave(true)
          await waitTime(2000);
        },
        onlyAddOneLineAlertMessage: '请先保存数据',
        onChange: setEditableRowKeys,
        actionRender: (row, config, dom) => [dom.save, dom.cancel],
      }} />

Answer 1

核心问题是没有进行有效的数据管理。事实上所谓的新建是指：

1. 如果有其它正在编辑的行，进行处理（结束其编辑状态或者阻止新建）
2. 在源数据中加入新行，例如sourceData.push({id: null})
3. 将新插入的行转为编辑状态
4. 保存后将数据存入源数据，例如save(data).then(row => sourceData.push(row))
5. 取消新插入行的编辑状态
6. 删除新插入的行，例如sourceData.pop()

所以，在onSave方法里把4，5，6步做了就好了。我用的ant design的table，没用pro，所以不给具体例子了，原理一样的。