点语法名称的字段实例上未标记SyncError [英] syncError not flagged on Field instance with dot syntax name

问题描述

我有一个字段poll.id，它是包含多个部分的表单的一部分。每个部件都包含在带有@reduxForm批注的组件中，并且每个组件可以有其自己的唯一验证方法。

我的问题是，在这种情况下，当validatePoll返回验证异常时，它不会显示在字段级别。我想知道这是否与该字段的点语法有关。

@reduxForm({
    form: 'posteditor',
    destroyOnUnmount:false,
})
@autobind
class MyForm extends React.Component {

    [...]

    pollButton(field){
        console.log('poll.id', field);//meta.error = undefined
        [...]
    }


    poll(){
        const { poll, visible, syncErrors } = this.props;
        return (
          <Field
            name="poll.id"
            value={poll && poll.id}
            type="number"
            component={this.pollButton}
            props={{
              visible: visible,
              questions: (poll && poll.questions) || []
            }}
            />
        );
    }
}


@reduxForm({
    form: 'posteditor',
    validate: validatePoll,
    destroyOnUnmount:false,
})
@autobind
class PostPoll extends React.Component {

推荐答案

您遗漏了验证函数，但我猜您返回的是以下内容：

validate(values) {
  const errors = {}
  if(!values.poll.id) {
    errors['poll.id'] = 'Required' // ❌ 👎
  }
  return errors
}

...而您应该返回此消息：

validate(values) {
  const errors = {}
  if(!values.poll.id) {
    errors.poll = { id: 'Required' } // ✅ 👍
  }
  return errors
}

这篇关于点语法名称的字段实例上未标记SyncError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！