EditableProTable 編輯在 ant 設計專業版中不起作用

Question

我用 ant 設計 ProTable 組件創建了表，其編輯 function 不起作用。 它顯示這樣的錯誤。 （“無法讀取未定義的屬性（讀取 'toString'）”）。 我嘗試了很多方法來解決這個問題，但還沒有找到解決方案。

我想從 CSV 文件上傳中獲取表數據。 function 已經在工作並且數據已檢索到表中。

const columns = [
    {
      title: 'First Name',
      valueType: 'string',
      typeof:'string',
      dataIndex: 'fName',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '' }],
        };
      },
    },
    {
      title: 'Last Name',
      valueType: 'string',
      typeof:'string',
      dataIndex: 'lName',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '' }],
        };
      },
    },
    {
      title: 'Email',
      valueType: 'string',
      typeof:'string',
      dataIndex: 'email',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '' }],
        };
      },
    },
    {
      title: 'Position',
      valueType: 'string',
      typeof:'string',
      dataIndex: 'position',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '' }],
        };
      },
    },
    {
      title: 'Actions',
      valueType: 'option',
      width: 200,
      render: (text, record, _, action) => [
        <a
          key="delete"
          onClick={() => {
            setData(data.filter((item) => item.id !== record.id));
          }}
        >
          Delete
        </a>,
        <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);
          }}
        >
          Edit
        </a>,
      ],
    },
  ];

EditableProTable
          rowKey="id"
          actionRef={actionRef}
          headerTitle=""
          maxLength={5}
          recordCreatorProps={false}
          columns={columns}
          request={async () => ({
            data: data,
            total: 3,
            success: true,
          })}
          value={csvArray}
          onChange={setCsvArray}
          editable={{
            type: 'multiple',
            editableKeys,
            onSave: async (rowKey, data, row) => {
              await waitTime(2000);
            },
            onChange: setEditableRowKeys,
            actionRender: (row, config, defaultDom) => [
              defaultDom.save,
              defaultDom.delete || defaultDom.cancel,
            ],
          }}
        />[![enter image description here][1]][1]

Answer 1

editableKeys 數組包含正在編輯 state 中的行

const [editableKeys, setEditableRowKeys] = useState(() => csvArray.map((item) => item.index)); // or .map((item=) => item.key));