Question

export const composeValidators = (...validators) => value => validators.reduce((error, validator) => error || validator(value), undefined);

我不确定上述代码的语法。有人可以帮我分解一下吗？

我是箭头功能的新手，但是我在这里看到了多个！！！在redux-final-form验证器字段上调用该函数。我该如何更改它，以使其返回未定义且无验证失败和'！验证消息”。

我想知道是否有可能制作一个 newComposeValidators 函数，该函数将相同的参数传递给composeValidators函数并返回带有感叹号和空格的错误消息？

它的用法如下：

Field name="postalCode" validate={composeValidators(requiredValidator, postalCodeValidator)}>
                  {({ input, meta }) => (
                    <Fragment>
                      <StyledInput
                        validationFailed={meta.touched && meta.error}
                        placeholder={postalCodePlaceholder}
                        required
                        {...input}
                      />
                      <StyledFieldError meta={meta} />
                    </Fragment>
                  )}
                </Field>

验证器的定义为：

  const messages = {
  required: 'Input is required',
  email: 'Invalid Email',
  phone: 'Invalid Phone Number',
  postalCode: 'Invalid Postal Code',
  positiveNumber: 'Must be greater than 0',
  pastDate: 'Please enter a valid date in the past',
};

const requiredValidator = (value) => (value && value.trim().length ? undefined : messages.required);
const emailValidator = (value) => (!value || emailRegex.test(value) ? undefined : messages.email);
const phoneValidator = (value) => (!value || phoneNumberRegex.test(value) ? undefined : messages.phone);
const postalCodeValidator = (value) =>
  !value || zipCodeRegex.test(value) || canadianPostalCodeRegex.test(value) ? undefined : messages.postalCode;
const positiveNumberValidator = (value) =>
  value && Number.isInteger(+value) && +value > 0 ? undefined : messages.positiveNumber;
const pastDateValidator = (value) => {
  if (!value || !dateRegex.test(value)) {
    return messages.pastDate;
  }

Answer 1

export const composeValidators = (...validators) => value => validators.reduce((error, validator) => error || validator(value), undefined)

此函数将验证函数的数组作为参数并返回另一个函数。

返回的函数将您的值作为参数，然后通过验证器函数进行映射，如果validator（value）返回值，则将错误分配给该值，依此类推（未定义是错误的初值），然后返回错误

看看reduce函数

您的功能可能如下所示

export const composeValidators = (...validators) => {
  return function checkError(value){
    // validators = [ requiredValidator, postalCodeValidator ] in this case    
    // imaginevalidators.reduce((error, validator) => error || validator(value), undefined) does something like this
    let error = undefined
    validators.map(validator => { // loop through array of validator function
      if(validator(value)) {
        error = validator(value)
      }
    })
    return error
  }
}

追加！如果验证失败，还有一个错误空间

validators.reduce((error, validator) => error || `! ${validator(value)}`, undefined)

Answer 2

我认为最好的解释方法是通过示例。因此，鉴于此功能：

export const composeValidators = (...validators) => value => validators.reduce((error, validator) => error || validator(value), undefined)

我们可以这样称呼它：

composeValidators(valiadationRuleFunction1, valiadationRuleFunction2)( 'someValueHere')

因此(...validators)变成[valiadationRuleFunction1, valiadationRuleFunction2]，而'someValueHere'变成value。

关于

validators.reduce((error, validator) => error || validator(value), undefined)

我们首先将“错误”定义为未定义的值。第一次运行时，错误将是不确定的，因此将使用提供的值valiadationRuleFunction1调用valiadationRuleFunction1('someValueHere')。

如果此操作通过验证，则“错误”仍将是不确定的，因此将使用提供的相同值（即valiadationRuleFunction2）来调用valiadationRuleFunction2('someValueHere')。

如果当前函数遇到错误，即valiadationRuleFunction1('someValueHere')将返回验证错误，则它会短路-现在将定义“错误”。当我们执行error || validator(value)检查时-错误将返回并且valiadationRuleFunction2('someValueHere)将不执行。

这对于基于优先级显示单个错误消息非常有效，即最重要的验证规则应首先传递到“ composeValidators”。如果在某些情况下需要显示多个错误消息，则可以将reduce函数中的默认“错误”值从“未定义”更改为“ []”。每次验证程序运行并返回错误时，我们都会将此错误推送到数组中并返回错误数组。

测试此函数以返回一个函数

鉴于我们有一个验证器（当未指定值即要求验证时，它将返回错误）：

export const valiadationRuleFunction1 = value => !value ? 'Please provide a value' : undefined`

使用*语法（即import * as ValidationRules from './pathToWhereThisRuleLives'
为此验证规则创建一个间谍，例如const valiadationRuleFunction1Spy = jest.spyOn(Validation,'valiadationRuleFunction1');
使用验证器和将触发错误并断言返回的错误消息的值调用'composeValidators'函数，即expect(composeValidators(valiadationRuleFunction1)('')).toBe('Please provide a value');
然后我们可以使用valiadationRuleFunction1Spy来断言实际的验证函数被称为expect(valiadationRuleFunction1Spy).toHaveBeenCalledTimes(1);。

不确定函数的作用：语法

2 个答案: