如何验证嵌套组件中的方法

时间:2020-02-14 00:45:47

标签: javascript reactjs redux-form

我想验证嵌套Component中的方法。我该怎么办?

这是我的代码:

const detailValidation = detail => {
  const errors = {};

  if (!detail || !detail.length) {
    return { _error: "At least one detail item must be required" };
  } else {
    let detailArrayErrors = [];

    detail.forEach((detailItem, detailIndex) => {
      const detailErrors = {
        quantity: null,
        product: { code: null, name: null, price: null },
        subtotal: null
      };

      if (!detailItem || !detailItem.quantity) {
        detailErrors.quantity = "required";
        detailArrayErrors[detailIndex] = detailErrors;
      } else if (!detailItem || isNaN(detailItem.quantity)) {
        detailErrors.quantity = "you must entry numbers";
        detailArrayErrors[detailIndex] = detailErrors;
      } else if (!detailItem || !/^([0-9.])/.test(detailItem.quantity)) {
        detailErrors.quantity = "you must entry numbers";
        detailArrayErrors[detailIndex] = detailErrors;
      }
      if (!detail || !detailItem.product || !detailItem.product.code) {
        detailErrors.product.code = "you must entry code";
        detailArrayErrors[detailIndex] = detailErrors;
      } else if (!detailItem || !detailItem.product || isNaN(detailItem.product.code)) {
        detailErrors.product.code = "You must entry numbers";
        detailArrayErrors[detailIndex] = detailErrors;
      } else if (!detailItem || !detailItem.product || !/^([0-9.])/.test(detailItem.product.code)) {
        detailErrors.product.code = "You must entry numbers";
        detailArrayErrors[detailIndex] = detailErrors;
      }
      if (!detailItem || !detailItem.product || !detailItem.product.name) {
        detailErrors.product.name = "required";
        detailArrayErrors[detailIndex] = detailErrors;
      }
      if (!detailItem || !detailItem.product || !detailItem.product.price) {
        detailErrors.product.price = "required";
        detailArrayErrors[detailIndex] = detailErrors;
      } else if (!detailItem || !detailItem.product || isNaN(detailItem.product.price)) {
        detailErrors.product.price = "You must entry numbers";
        detailArrayErrors[detailIndex] = detailErrors;
      } else if (!detailItem || !detailItem.product || !/^([0-9.])/.test(detailItem.product.price)) {
        detailErrors.product.price = "You must entry numbers";
        detailArrayErrors[detailIndex] = detailErrors;
      }
      if (!detailItem || !detailItem.subtotal) {
        detailErrors.subtotal = "required";
        detailArrayErrors[detailIndex] = detailErrors;
      } else if (!detailItem || isNaN(detailItem.subtotal)) {
        detailErrors.subtotal = "You must entry numbers";
        detailArrayErrors[detailIndex] = detailErrors;
      } else if (!detailItem || !/^([0-9.])/.test(detailItem.subtotal)) {
        detailErrors.subtotal = "You must entry numbers";
        detailArrayErrors[detailIndex] = detailErrors;
      }
    });
    if (detailArrayErrors.length) {
      errors.detail = detailArrayErrors;
    }
  }

  return errors;
};

这是我以redux形式收取验证方法的费用:

DetailFormBill = reduxForm({
    form: 'bill',
    validate: detailValidation
})(DetailFormBill);

我正在导出DetailFormBill和detailValidation 出口{ detailValidation, DetailFormBill }

现在我在BillForm.jsx中,调用detailValidation:

import {DetailFormBill,detailValidation} from './DetailFormBill';

const validations = values => {
    const errors = {};
    errors.detail = detailValidation(values.detail)
    return errors;
} 

预期结果是看到验证,但实际结果是“我看不到验证”,可能是语法错误,除非

if(!detail || !detail.length){
    return { _error:'At least one detail item must be required' }
}

怎么了?我需要解决这个问题。

1 个答案:

答案 0 :(得分:-1)

能否请您解释一下您在说什么。输入,输出,预期输出是什么?