React Native 驗證 function 不起作用

Question

我想確保我正確地測試了這個。

這是正在發生的事情：

測試步驟

1. 導航到我的帳戶>家庭信息>家庭電話

2. 輸入以下字符串：1112345678

3. 嘗試保存並觀察來自validatesPhones的錯誤消息。

4. 將其更改為正確的數字。

5. 嘗試保存並觀察來自_handleSubmit助手的錯誤消息。

在注銷並重新登錄之前，您無法輸入正確的號碼。

我相信問題在於這個_validate function：

_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然后運行此 function 以告訴用戶電話號碼必須有效且 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;
}

當我在刪除不正確的電話號碼后輸入正確的電話號碼時，第一個 function， _validate() function returns 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 function？

Answer 1

如果您在_validate function 中的 this.props.validationErrors 中得到正確的 json，那么只需在this.props.validationErrors中使用Current Value (curr)而不是Accumulator (acc)

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

Answer 2

您應該執行以下操作之一：

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

或者

...
handleSubmit={this.handleSubmit.bind(this)}
...