syncError nicht markiert Feldinstanz mit Punktsyntaxname

Question

Ich habe ein Feld poll.id, das Teil eines Formulars ist, das mehrere Teile enthält. Jeder Teil ist in einer Komponente mit einer @reduxForm-Annotation enthalten, und jede Komponente kann ihre eigene eindeutige Validierungsmethode haben.

Mein Problem ist, dass in diesem Fall, wenn die validatePoll eine Validierung Ausnahme zurückgibt, es nicht auf Feldebene angezeigt wird. Ich frage mich, ob das mit der Punktsyntax des Feldes zu tun hat.

@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 { 

Answer 1

Sie bei Ihrer Validierungsfunktion, aber meine Vermutung ist, dass Sie dies Rückkehr:

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

... und Sie sollte dies zurückkehren:

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