Recently, using react-hook-form combined with the input component of ant design to make a form, I found that the defaultValue of the component obtained from the interface would not be updated to the antd component. Later, it was found that the defaultValue of antd was not allowed to be modified once it was assigned.
Solution: Set the antd key to be the same as the defaultValue, or update it along with the defaultValue. When the defaultValue is updated, because the key is different, the component will re-render and update the defaultValue.
<Controller
as={
<Input />
}
disabled={
props.disabled}
key={
props.defaultValue||props.name}
name={
props.name}
control={
props.control}
id={
props.id}
defaultValue={
props.defaultValue}
rules={
{
required: props.required ? props.reqMsg?props.reqMsg:'必填' : '',
}}
placeholder={
props.placeholder}
maxLength={
props.maxLength}
style={
props.style}
/>