一、总结：Form实现点击item中的button，实现提交

<Form form={form} name="searchMenu" layout="inline" onFinish={search}>
    <Form.Item name={"a"}></Form.Item>

    <Form.Item shouldUpdate>
      {() => (
        <Button type="primary" htmlType="submit" >
          查询
        </Button>
      )}
    </Form.Item>
</Form>

当点击查询时，因为设置了shouldUpdate和submit，所以可以触发onFinish={search}事件

二、踩坑：报错data.clone is not a function

问题复现：

标签结构为：Form -> Form.item -> DatePicker
然后在Form.item中设置初始值报错。
以上结构是层层嵌套，中间没有任何其他组件

解决过程：

• 一开始想在DatePicker中设置初始值，但是报了错：defaultValue will not work on controlled Field. You should use initialValues。antd希望当出现上述结构时将初始值设置在外层。
• 然后我就设置到了Form.item，第一次提交没问题，第二次提交就报错。因为Form.item的初始值应为String，但是DatePicker的初始值为moment类型。并且Form.item的初始值不能够修改。

解决方案：

1. 可以在DatePicker外层再加一个div，然后把初始值设置到DatePicker上。阻止了antd默认的props初始值传递，相当于直接在DatePicker中设置了初始值，而不经过Form和Form.item；
2. 或者使用form.resetFields()，然后把初始值设置在Form.item上。每次提交表单后都重置表单。

三、总结：Table除了要给每一项加key，还要在rowKey中写函数为每一行加key

const tableData = list.map((item, index) => {
  item["key"] = index + 1;
  return { ...item };
});

<Table
  columns={columns}
  dataSource={tableData}
  rowKey={(row) => row.qtalk}
/>

四、踩坑：initialValues defaultValue报错

不一定需要用哪个，看文档。

五、踩坑：使用Row、Col不生效

注意是不是子元素写了style样式，出现冲突。