Reactjs 反应本机验证功能不工作

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

这就是正在发生的事情：

测试步骤

导航到我的帐户>家庭信息>家庭电话

输入以下字符串：1112345678

尝试保存并观察来自

validatesPhones

的错误消息

把它改成正确的数字

尝试保存并观察来自

\u handleSubmit

帮助程序的错误消息

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

我认为问题出在这个

\u 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;
}

删除不正确的电话号码后输入正确的电话号码时，第一个函数

\u validate（）

函数

返回false

然后，它会看到，而不是提交电话号码，它会在最后提供警报：

_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.");
    }
  };

---

是否有更好的方法来开发验证功能？

您应该执行以下操作之一：

handleSubmit = (event) => {
    console.log("there should be a phone number here: ", event.target.value);
  }

或

---

如果您在

函数中的
这个.props.validationErrors
中得到了正确的json，那么只需在该函数中使用
当前值（curr）
而不是
累加器（acc）
，如下所示：

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

按照您的回答，我仍然得到
未定义的
。我已经进一步编辑了问题，我相信问题出在
\u validate
函数中。请再看一看问题。这次有悬赏。您是否在
PhoneNumbersForm
组件上设置了
homePhoneChanged
道具？您想从TouchableOpacity中的handleSubmit发送什么？@AshwinMothilal，我希望它发送并保存正确的电话号码，即使提交了错误的电话号码。因此，它不允许我在提供错误的电话号码后直接保存正确的电话号码。即使我删除了错误的电话号码并提供了正确的电话号码，它仍会提示我修复电话号码。我的意思是您的代码中使用了什么变量/值名称。@AshwinMothilal，我已进一步编辑了该问题，我相信问题出在
\u validate
函数上。@Daniel如果这不起作用，那么你最好在expo零食上共享代码，这样我们可以更好地帮助你。我最终用
map（）
替换了
reduce（）
，并在其中传递了你的答案。它是有效的，但我觉得它不是最优雅的解决方案。那么，您是否建议将
Object.keys（）.reduce（）部分全部删除？我想检查您的答案，因为它与我的答案很接近，但需要澄清。@Daniel，您只需要在现有的
reduce（）
方法中更改两行内容。因为您使用的是
累加器（acc）
而不是
当前值（curr）
。您还可以使用simple
for loop
或
map
来实现这一点。这似乎在iOS上也可以，您知道为什么它在Android上仍然失败吗？区别是什么？android应该不会有任何问题。通过在函数中放置日志进行检查。
if (this.props.validationErrors[curr] !== "") {
     return false;
}