ReactJS：Antd可编辑单元格回调时对象变为[object object]求助

我在使用Ant Design的可编辑单元格示例时，执行handleSave回调函数时，传入的record对象变成了[object Object]。几乎没修改示例代码，请问原因是什么？

EditableCell组件代码 #

const EditableCell = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef(null);
  const form = useContext(EditableContext);
  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    console.log("toggle edit tapped ", record);
    setEditing(!editing);    
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
    });
  };

  const save = async () => {
    try {
      const values = await form.validateFields();
      toggleEdit();
      console.log("record to be saved", record, values);
    
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };

主组件相关代码 #

const columns = defaultColumns.map((col) => {
        if (!col.editable) {
          return col;
        }
    
        return {
          ...col,
          onCell: (record) => ({
            record,
            editable: col.editable,
            dataIndex: col.dataIndex,
            title: col.title,
            handleSave,
          }),
        };
      }); 
        
     const handleSave = async (row) => {
            const newData = [...dataSource];
            console.log("final save to send ", row)
            let result = await triggerSaveToServer(row);
            console.log("result saved ", result)
return (
    <div>
    <Space direction="vertical">
    <Search
      placeholder="Key in environment code"
      onSearch={onSearch}
      style={{
        width: 200,
      }}
  />

<Table
         size="small"
        columns={columns}
        components={components}
        rowkey={(record) => record._id}
        expandable={{
          expandedRowRender,
          defaultExpandedRowKeys: ['0'],
        }}
        dataSource={dataSource}
      />
   
     </Space>
    </div>
  );

控制台显示调用方传递的是正常对象，但接收方收到的是[object Object]，相关截图：

问题原因及解决方案 #

问题出在Table组件的属性拼写错误：你把rowKey写成了rowkey（注意K是小写）。

Antd Table的rowKey是必填属性，用来唯一标识每一行数据，拼写错误会导致Table内部无法正确维护行数据的引用关系，最终在传递数据到handleSave时，record对象被错误转换为字符串[object Object]。

只需要修正Table的属性名，把rowkey改成rowKey即可：

<Table
  size="small"
  columns={columns}
  components={components}
  rowKey={(record) => record._id} // 修正为驼峰式的rowKey
  expandable={{
    expandedRowRender,
    defaultExpandedRowKeys: ['0'],
  }}
  dataSource={dataSource}
/>

修改后，Table能正确识别每行的唯一标识，handleSave就能接收到正常的对象了。

内容的提问来源于stack exchange，提问作者Daniel Shen