测试节点版本配置 | React Ant Design ProTable 表格编辑问题解决方案

在使用 Ant Design ProTable 组件进行表格编辑时，如果多个面板下都使用同一个 ProTable 实例，并且在 ProForm.Item 组件中设置了相同的 name 属性，会导致所有的表格都绑定到了同一个表单字段上，当编辑其中一个表格时，其他面板下的表格也会受到影响。

为了解决这个问题，可以将 ProForm.Item 组件放在循环中的外部，这样每个面板的表格都会有独立的字段名。

修改代码如下：

<Collapse
  ghost
  activeKey={activeKeys}
  onChange={(e) => setActiveKeys(isArray(e) ? e : [e])}
>
  {DEMAND_DICT.map((item) => {
    return (
      <Panel header={item.label} key={item.value}>
        <ProForm formRef={formRef} submitter={false}>
          <ProForm.Item name='dataSource' style={{ margin: '0' }}>
            <EditableProTable
              rowKey='key'
              recordCreatorProps={false}
              actionRef={actionRef}
              columns={columns}
              editable={{
                type: 'single',
                editableKeys: editKeys,
                onChange: setEditKeys,
                actionRender: (row, config, defaultDoms) => {
                  return [defaultDoms.save, defaultDoms.cancel];
                },
              }}
              search={false}
              pagination={false}
              bordered
            />
          </ProForm.Item>
        </ProForm>
        <Space>
          <Button
            style={{ border: '1px' }}
            onClick={() => {
              actionRef.current?.addEditRecord?.({
                key: getOnlyKey(),
              });
            }}
          >
            <PlusCircleOutlined />
          </Button>
        </Space>
      </Panel>
    );
  })}
</Collapse>

这样每个面板下的表格都会有独立的数据源字段，编辑一个表格不会影响其他表格的数据。