React-hook-form结合antd时defaultValue不更新的解决方式

最近使用react-hook-form结合ant design的输入组件做表单,发现从接口获取的组件defaultValue不会更新到antd组件上,后来发现是因为antd的defaultValue一旦赋值不允许再次修改。

解决方法:将antd的key设置成defaultValue一致,或者随defaultValue一起更新,defaultValue更新时,因为key不同,组件会重新渲染,更新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}
/>

你可能感兴趣的:(问题解决,react,hooks,javascript)