React中使用antd 表单，根据后端验证结果，回显错误的行

在Table里使用Form，由后端验证名称路径是否正确匹配，根据返回结果，将不匹配的标红，antd使用的是3.x

 

table的列大概是这个样子

  handleValidate =() => {
    console.log('validate', this.props.fieldConfigInfo, this.props.webServiceInfo)
    const { webServiceInfo, fieldConfigInfo, } = this.props
    this.props.form.validateFields((errors, values) => {
      if(!errors && JSON.stringify(fieldConfigInfo) !== '[]') {
        let errorField = this.state.errorField //errorField存错误字段的名字
        let obj = {
        data: JSON.stringify(webServiceInfo),
        fieldData: JSON.stringify(fieldConfigInfo)
        }
      validaetPathApi(obj).then(res => {//valiadte
        if(res.data.code ===0) {
          if(res.data.data.length === 0) {
            message.success('字段，路径验证正确')
            errorField.map(item => {//验证成功，将之前的错误字段的form的错误信息置空
              this.props.form.setFields({
                [item]: {
                  errors:null
                }
              })
            })
          }
          else {
            let datalist = res.data.data//验证失败,data为一个数组，返回不正确的fieldName
            fieldConfigInfo.map(item => {//fieldConfigInfo为表格的数据源
              if(datalist.includes(item.fieldName)) {//包含当前的fieldName
                let name1 = 'fieldName'+item.key//拿表单这一项绑定的名字
                errorField.push(name1)//将错误字段加入到一个数组里
                this.props.form.setFields({
                  [name1]: {
                    errors:[new Error('检查字段名及路径填写')] 
                  }
                })
              }
            })
          }
        }
      })

      }
      
    })
  }

主要使用到了表单的setFieldsValue