react ant-design 可编辑行表格线上保存不上

Question

上面是本地效果，下面是线上效果。保存不显示。
代码如下：
// 增加一行

const addRow = () => {
    const obj = {
        fieldName: '',
        fieldType: "",
        fieldTypeLabel: "",
        key: getOnlyKey(),
    }
    let tempData = [...data];
    tempData.push(obj);
    setData((prevState: any) => tempData);
}

const isEditing = (record: any) => record.key === editingKey;

// 自定义组件下拉改变事件
const handleChange = (value: string, record: any) => {
    
};

// 自定义组件删除事件
const deleteRecord = (record, index) => {
    let tempData = [...data];
    tempData.splice(index, 1);
    setData((prevState: any) => tempData);
}

// 自定义组件保存
const save = async(index: number) => {
    try {
        const rowData = await form.validateFields();
        let tempData = [...data];
        let obj = tempData[index];
        obj.fieldName = rowData.fieldName;
        obj.fieldTypeLabel = rowData.fieldTypeLabel;
        obj.fieldType = getFieldTypeLabel(rowData.fieldTypeLabel) || null;
        tempData.splice(index, 1, obj);
        console.log("tempData", tempData, "rowData", rowData, "index", index, 'obj', obj);
        // tempData[index].fieldName = rowData.fieldName;
        // tempData[index].fieldTypeLabel = rowData.fieldTypeLabel;
        // tempData[index].fieldType = getFieldTypeLabel(rowData.fieldTypeLabel) || null;
        setData((prevState: any) => tempData);
        setEditingKey('');
    } catch (e) {
        message.warning("校验不通过!");
    }
}

// 自定义组件取消
const cancel = (key: React.Key) => {
    setEditingKey('');
}

// 自定义组件编辑
const edit = (record: any) => {
    form.setFieldsValue({ fieldName: '', fieldType: '', fieldTypeLabel: '', ...record });
    setEditingKey(record.key);
}

// 自定义组件fieldType获取值
const getFieldTypeLabel = (value: string) => {
    let item = typeDown.find((item, index, arr) => item.label === value);
    return item.value;
}

useEffect(() => {
    console.log("data", data);
}, [data]);

const columns = [
    {
        title: '名称',
        dataIndex: 'fieldName',
        width: '35%',
        editable: true,
    },
    {
        title: '类型',
        dataIndex: 'fieldTypeLabel',
        width: '35%',
        editable: true,
    },
    {
        title: '操作',
        dataIndex: 'operation',
        render: (_: any, record: any, index: number) => {
            const editable = isEditing(record);
            return editable ? (
                <span>
                    <Typography.Link onClick={() => save(index)} style={{ marginRight: 8 }}>保存</Typography.Link>
                    <Typography.Link onClick={() => cancel(index)}>取消</Typography.Link>
                </span>
            ) : (
                <span>
                    <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)} style={{ marginRight: 8 }}>编辑</Typography.Link>
                    <Typography.Link onClick={() => deleteRecord(record, index)}>删除</Typography.Link>
                </span>
            );
        },
    },
];

// mergedColumns合并列
const mergedColumns = columns.map(col => {
    if (!col.editable) {
        return col;
    }

    return {
        ...col,
        onCell: (record: any) => ({
            record,
            inputType: col.dataIndex === 'fieldName' ? 'text' : 'select',
            dataIndex: col.dataIndex,
            title: col.title,
            editing: isEditing(record),
        }),
    };
});

const EditableCell = 
// React.useCallback(
    ({
        editing,
        dataIndex = '',
        title = '',
        inputType = '', // 自定义，获得输入类型
        record = {} as any,
        children,
        ...restProps
    }) => {
        console.log("children", children);
        const selectFieldTypeNode = (
            <Select
                showSearch
                onChange={(value: string) => handleChange(value, record)}
                filterOption={(input, option) =>
                    option?.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
            >
                {typeDown.map(item => (
                    <Option key={item.value} value={item.label}>
                        {item.label}
                    </Option>
                ))}
            </Select>
        );
        
        const selectFieldFormatNode = (
            <Select
                showSearch
                onChange={(value: string) => handleChange(value, record)}
                filterOption={(input, option) =>
                    option?.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
            >
                {formatDown.map(item => (
                    <Option key={item.label} value={item.label}>
                        {item.label}
                    </Option>
                ))}
            </Select>
        );
        
        const inputNode = (
            <Input />
        );
        
        const actualNode = inputType == 'select' ? dataIndex == 'fieldTypeLabel' ? selectFieldTypeNode : selectFieldFormatNode : inputNode;

        return (
            <td {...restProps}>
                {editing ? (
                    <Form.Item
                        name={dataIndex}
                        style={{
                            margin: 0,
                        }}
                        rules={[
                            {
                                required: true,
                                message: `请输入${title}!`,
                            },
                        ]}
                    >
                        {actualNode}
                    </Form.Item>
                ) : (
                    <div>
                        {children}
                    </div>
                )}
            </td>
        );
    }
    // [data]
// );

页面：

            <Form
                className='form'
                name="basic"
                form={form}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
            >
                <Table
                    rowKey="key"
                    components={{
                        body: {
                            cell: EditableCell,
                        },
                    }}
                    bordered
                    dataSource={data}
                    columns={mergedColumns}
                    rowClassName="editable-row"
                    pagination={false}
                    scroll={{y: 200}}
                />
            </Form>

Answer 1

可以咨询这个：https://shop522760029.taobao....