React+hook+ts+ant design封装一个具有动态表格得页面

{data && data.map((item, index) => (
                        <Row style={{ marginTop: "20px" }} gutter={24}>
                            <Col span={4}>
                                <Form.Item
                                    key={index}
                                    labelCol={{ span: 13 }}
                                    wrapperCol={{ span: 8, offset: 1 }}
                                    label="缸数/匹号"
                                    name={`batchCode-${index}`}
                                    rules={[{ required: true, message: '请输入缸数/匹号' }]}
                                >
                                    <Input />
                                </Form.Item>
                            </Col>

//数组对象自己转换为数组
export function myFunc(obj: any) {
    const newObj: any = {}
    for (const [key, value] of Object.entries(obj)) {
        const strList = key.split('-')
        const groupId = strList.pop() // 拿到最后一个"-"之后的字符
        const keyName = strList.join('') // 最后一个"-"之前的所有字符再加起来(理论上如果只有一个"-"可以直接key.split('-')[0]和key.split('-')[1])
        if (!newObj[groupId as string]) {
            newObj[groupId as string] = {}
        }
        newObj[groupId as string][keyName] = value
    }
    return Object.values(newObj)
}

const handleAdd = () => {
        const newData = data;
        newData.push({ index: number });
        console.log(newData, "newData")
        setNumber(number + 1)
        setData(newData)
    }

const handleRemove = (index: number) => {
        console.log(index)
        const newData = data.splice(1, index)
        console.log(newData, "newData")
        setData(newData)
    }

const res = await form.validateFields()