The value of antd initialValue is changed without re-rendering and emptying the entered form data

topic description

when I was working on the project, I found that the value of antd initialValue changed the input form data and did not change with it
when I did this, changing the value of searchFormData.loginName to the original input form data of initialValue: searchFormData.loginName, would not empty the update
strangely enough, when I wrote the initialValue: Math.random (), data in this way, it would update

.

now I have another need to refresh the page, but it doesn"t use routing.
Refresh the page is a global button. I empty all the state here to implement the refresh operation

.

but even if the state is empty, the contents of the entered form will not be emptied and the contents of the p tag have been emptied

sources of topics and their own ideas

my refresh operation operates on the top-level component, so there is no way to call the descendant-level this.props.form.resetFields (); method to clear

related codes

/ / Please paste the code text below (do not replace the code with pictures) 

{searchFormData.loginName}


<FormItem label="" {...formItemLayout}>
    {getFieldDecorator("loginName", {
      initialValue: searchFormData.loginName,
    })(
      <Input defaultValue={searchFormData.loginName} />
    )}
</FormItem>

what result do you expect? What is the error message actually seen?

I hope that when I empty the state, the original input in the input will also be cleared, but I don"t want to use each input to write the onchang event, because there are more

Antdesign antd
Sep.07,2021

the data of the form can be stored in upper-level components or in Redux or dva by using onFieldsChange and mapPropsToFields,. For more information, please refer to the rc-form example.

Note: the form field data returned in mapPropsToFields must be wrapped in Form.createFormField. 

Form.create({
  onFieldsChange(props, changedFields) {
    props.onChange(changedFields);
  },
  mapPropsToFields(props) {
    return {
      username: Form.createFormField({
        ...props.username,
        value: props.username.value,
      }),
    };
  },
  onValuesChange(_, values) {
    console.log(values);
  },
})

call

if you want to get real-time data. 
this.props.form.getFieldValue("loginName")

after all, this is not a two-way binding

Previous: How do you click paging to get vue back to the top?

Next: The problem of vue2 cross-domain request

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5a526-448f5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5a526-448f5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?