reactjs - React Native 验证功能不起作用

Question

我想确保我正确地测试了它。

这就是正在发生的事情:

测试步骤

1. 导航至我的帐户>家庭信息>家庭电话

2. 输入以下字符串:1112345678

3. 尝试保存并观察来自 validatesPhones 的错误消息。

4. 将其更改为正确的数字。

5. 尝试保存并观察来自 _handleSubmit 帮助程序的错误消息。

在注销并重新登录之前，您无法输入正确的号码。

我认为问题出在这个 _validate 函数中:

_validate = () => {
    const isValid = Object.keys(this.props.validationErrors).reduce(
      (acc, curr) => {
        if (this.props.validationErrors[acc] !== "") {
          return false;
        }

        return acc;
      },
      true
    );

    return isValid;
  };

当我输入错误类型的数字时，返回 true 验证，但数字数量是正确的，因此它返回 true然后它运行此函数来告诉用户电话号码必须有效且为 10 位数字:

function validatePhones(state, payload) {
  const [key] = Object.keys(payload);
  console.log([key]);
  if (["homePhone", "mobilePhone"].includes(key)) {
    const isValid =
      payload[key].length === 0 || regex.phoneNumber.test(payload[key]);
    console.log(isValid);
    const message = isValid
      ? ""
      : "Phone number must be valid and contain 10 digits";
    console.log(message);

    return {
      ...state,
      validationErrors: {
        ...state.validationErrors,
        [key]: message
      }
    };
  }



return state;
}

当我在删除不正确的电话号码后输入正确的电话号码时，第一个函数，_validate() 函数返回 false然后 _handleSubmit 看到了这一点，并且没有提交电话号码，而是在最后提供了警报:

_handleSubmit = () => {
    const isValid = this._validate();
    console.log("is the phone number valid: ", isValid);
    if (isValid) {
      this.setState({ displaySpinner: true });
      this.props
        .submitPhoneNumbers(this.props)
        .then(() => {
          this.setState({ displaySpinner: false });
          //eslint-disable-next-line
          this.props.navigation.goBack();
        })
        .catch(() => {
          this.setState({ displaySpinner: false });
        });
    } else {
      alert("Please, fix all the errors before saving your changes.");
    }
  };

是否有更好的方法来开发 _validate 函数？

Answer 1

如果您在 _validate 函数的 this.props.validationErrors 中获得正确的 json，则只需使用 当前值 (curr) 而不是 Accumulator (acc) 在该函数中如下所示:

if (this.props.validationErrors[curr] !== "") {
     return false;
}