Sprawdzanie poprawności jednego pola na podstawie innego pola w formularzu redux

Question

Używam redux-form, a mój komponent ma kilka FieldArray. Jeden z komponentów FieldArray generuje tabelę, tak jak pokazano na zrzucie ekranu. Tutaj każdy wiersz to komponent Field zawierający pole wyboru. Co chcę osiągnąć, jeśli komponent checkbox w tym wierszu jest zaznaczony, to powinno być wymagane tylko pole price.

starałem się rozwiązać ten problem za pomocą validate.js jak opisano w docs, ale ponieważ ten składnik ma strukturę jak:

<FirstComponent> 
<FieldArray 
    component={SecondComponent} 
    name="options" 
    fruits={fruitsList} 
/> 
</FirstComponent> 

W moim SecondComponent ja Iterowanie nad fruitsList a jeśli długość jest większa niż 1, a następnie Wypisuję ThirdComponent. Ten komponent jest odpowiedzialny za generowanie list owoców, jak pokazano na zrzucie ekranu. Mając pewien stopień zagnieżdżenia, kiedy sprawdzam z wartościami, ma on dużo opóźnień w wydajności, mój ekran zawiesza się, aż renderuje się ThirdComponent. Każdy komponent ma nieco Fields, więc nie można ich łatwo połączyć. Pomocny byłby każdy łatwiejszy sposób rozwiązania tego w elegancki sposób. Logika Walidacja jest następująca:

props.fruitsList.map((fruit, index) => { 
     const isChecked = values.getIn(['fruit', index, 'checked']) 
     if (isChecked) { 
     const price = values.getIn(['fruit', index, 'price']) 
     if (price === undefined || price.length === 0) { 
      errors.fruits[index] = { price: l('FORM->REQUIRED_FIELD') } 
     } 

     } 
     return errors 
    }) 

Answer 1

synchroniczny Funkcja zatwierdzanie podano wszystkie wartości w postaci. Dlatego zakładając, że pole wyboru jest wartością formularza, masz wszystkie potrzebne informacje.

function validate(values) { 
    const errors = {} 
    errors.fruits = values.fruits.map(fruit => { 
    const fruitErrors = {} 
    if (fruit.checked) { // only do fruit validation if it's checked 
     if (!fruit.price) { 
     fruitErrors.price = 'Required' // Bad user!! 
     } 
    } 
    return fruitErrors 
    }) 
    return errors 
} 

... 

MyGroceryForm = reduxForm({ 
    form: 'groceries', 
    validate 
})(MyGroceryForm)