ant-d v4.x 重置Form默认值的问题

Question

学生小白一枚，使用redux管理状态，状态改变后希望表单组件中的默认值也能随之改变，V3版本中一直使用Form.create()，V4之后取消了该方法，迁移文档建议使用Form.useForm()创建form实例，并调用实例方法resetFields(),试了好久都不成功，应该如何使用呢？求大神指点。

class ProSettings extends Component {
    render() {
        const onFinish = values => {
        //提交表单成功
        }
        const onFinishFailed = errorInfo => {
        //提交失败
        }
        const setingForm =
        <Form
            initialValues={{ interval: this.props.interval }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
            <Form.Item 
                label="间距/m"
                name="interval"
                rules={[{ required: true, message: '请输入数字' }]}
            >
                <InputNumber step={0.001} />
            </Form.Item>
            <Form.Item >
                <Button type="primary" htmlType="submit">
                    保存
                </Button>
            </Form.Item>
        </Form>
        return (setingForm)
    }
}
export default connect(
    state => ({ interval: state.interval })
)(ProSettings)

Answer 1

首先使用 useForm 就要使用函数式的编程,你用 class 就不行了
再次,这种东西官网上例子都有,你可以找下
https://codesandbox.io/api/v1...

初始数据这样加:

<Form {...layout} initialValues={{note:'12'}} form={form} name="control-hooks" onFinish={onFinish}>

在然后,你想要用 redux 里面的数据,那就看看 redux 的文档应该这样使用:

import { shallowEqual, useSelector } from 'react-redux';
const SelectManagerRedux = (state) => {
  return {
    isManager: state.global.info.isManager,
  };
};

const TestFn = (props):React.FC => {
  const { isManager } = useSelector(SelectManagerRedux, shallowEqual);
   // 这里就能获取 redux 的值
  return (
    isManager ? props.children : null
  );
}

将这 2 中情况结合一下就可以了:

const SelectManagerRedux = (state) => {
  return {
    data: state.global.info.data,
  };
};

function TestFn = props =>{
    const { data } = useSelector(SelectManagerRedux, shallowEqual);
    // 省略其他代码
    return <Form {...layout} initialValues={{note:data}} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item
        name="note"
        label="Note"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
      // 省略其他代码
      </Form>
}