基于redux Form中的另一个Field验证一个字段

Question

我正在使用redux-form，而我的Component有几个FieldArray。其中一个FieldArray组件生成表格，如屏幕截图所示。这里的每一行都是Field组件，包括复选框。我想要实现的是，如果选中该行上的checkbox组件，则只需要price字段。

我尝试使用docs中描述的validate.js来解决这个问题，但是因为这个组件的结构如下：

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

在我的SecondComponent我正在迭代fruitsList，如果长度大于1，那么我渲染ThirdComponent。该组件负责生成屏幕截图中显示的Fruit列表。有一定程度的嵌套，当我验证值时，它有很多性能滞后，我的屏幕冻结，直到它呈现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)