reduxの別のフィールドに基づいて1つのフィールドを検証します。

Question

私はredux-formを使用しており、コンポーネントには複数のFieldArrayがあります。 FieldArrayコンポーネントの1つが、スクリーンショットに示すようなテーブルを生成します。ここでは、各行はチェックボックスを含むFieldコンポーネントです。私が達成したいのは、その行のcheckboxコンポーネントがチェックされている場合は、priceフィールドだけが必要です。

Iはdocsに記載されているようvalidate.jsを使用してこの問題を解決しようとしたが、同様に、このコンポーネントは、構造を有するので：次に、私は長さfruitsList上とならば反復してい私のSecondComponentで

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

1より大きい私はThirdComponentをレンダリングする。このコンポーネントは、スクリーンショットに表示されているフルーツリストを生成します。ある程度のネスティングがあると、値で検証するとパフォーマンスがかなり遅くなり、画面がフリーズしてThirdComponentがレンダリングされます。各コンポーネントのビットはFieldsなので、簡単にマージすることはできません。エレガントな方法でこれを解決する簡単な方法が役立ちます。検証するためのロジックは以下の通りである：

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

同期検証機能は、フォームですべての値が与えられます。したがって、チェックボックスがフォーム値であると仮定すると、必要なすべての情報が得られます。

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)