方法一：

getFieldDecorator沒有第三個引數，如果寫了3個引數就會出錯

錯誤程式碼：

<Form.Item>
   {
    getFieldDecorator('userName',{ initialValue: 'Tom' },{
    rules: [{
     required: true,message: '請輸入使用者名稱',}],})(
    <Input placeholder='請輸入使用者名稱'/>
    )
   }
</Form.Item>

正確程式碼：

<Form.Item>
 {
 getFieldDecorator('userName',{
  initialValue:'Tom',rules:[
   {required: true,message:'請輸入使用者名稱'}
    ]
   })(
   <Input placeholder='請輸入使用者名稱'/>
   )
}
</Form.Item>

方法二：通過setFieldsValue來設定預設值可以解決

this.props.form.setFieldsValue({
 inputValue1:this.state.inputValue1,inputValue2:this.state.inputValue2,inputValue3:this.state.inputValue3,});

如果還不能解決，檢視是否在表單提交函式裡寫了驗證程式碼

handleSubmit = (e) => {
  e.preventDefault();
  this.props.form.validateFields((err) => {
   if (err) {
    console.log('表單驗證失敗');
   }else{
    this.handleOk();//這裡是表單驗證成功執行的函式
    
   }
  });
 
 };

補充知識：antd自定義元件初始值沒有返回或者設定initialValue，form.validateFields不會執行驗證

在自定義元件中加個componentDidMount返回初始值就可以啦

 componentDidMount() {
  const { onChange } = this.props;
  onChange({
   ...this.state,});
 }

以上這篇解決antd 表單設定預設值initialValue後驗證失效的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。