how to refresh the antd pro ProFormText initialValue-CodePudding

I am using antd pro to develop an app, now facing a problem is that the ProFormText initialValue did not update when the props changed. I pass the record from props and give it to the ModalForm, this is the code looks like:

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const { initialState } = useModel('@@initialState');

  return (
    <ModalForm
    title={intl.formatMessage({
      id: 'pages.apps.jobs.interview.updateInterview',
      defaultMessage: 'New rule',
    })}
    width="400px"
    visible={props.updateModalVisible}
    onVisibleChange={(value)=>{
      if(!value){
        props.onCancel();
      }
    }}
    onFinish={props.onSubmit}
    >
      <ProFormText
        initialValue={props.values.company}
        name="company"
        label={intl.formatMessage({
          id: 'pages.apps.jobs.interview.searchTable.company',
          defaultMessage: 'company',
        })}
        width="md"
        rules={[
          {
            required: true,
            message: (
              <FormattedMessage
                id="pages.searchTable.updateForm.ruleName.nameRules"
                defaultMessage="Please input the name！"
              />
            ),
          },
        ]}
      />
   );
 }

when open the modal and give the initial value, the next time when the props value change, the ProFormText still keep the first time value. I have read this question: Update antd form if initialValue is changed seems it only works on antd. the ModalForm did not contain the useForm() method. what should I do to fix this problem and keep the value changed follow props? This is the version info:

"@ant-design/pro-form": "^1.52.0",
"@ant-design/pro-layout": "^6.32.0",
"@ant-design/pro-table": "^2.61.0",

CodePudding user response：

I am facing the same problem with you, and tried follow the Update antd form if initialValue is changed instructions and works. First add:

const [form] = Form.useForm()

and bind the form with ModalForm like this:

<ModalForm
    form = {form}
    title={intl.formatMessage({
      id: 'pages.apps.jobs.interview.updateInterview',
      defaultMessage: 'New rule',
    })}
    width="400px"
    visible={props.updateModalVisible}
    onVisibleChange={(value)=>{
      if(!value){
        props.onCancel();
      }
    }}
    onFinish={props.onSubmit}
    >

you may facing the error Module "./antd/es/form/style" does not exist in container, just delete the .umi cache folder and rebuild the project. Finally add this code to reset the fields when the props changed:

  useEffect(() => {
    form.resetFields();
    form.setFieldsValue(props.values);
  });