1

React Native のログイン画面に Formik を使用しています。ログイン要求後に明示的に false に設定したにもかかわらず、Formik が Field Touched を true に設定する際に発生した問題。

ここに私のフォームコードがあります:

class LoginForm extends Component {
  static propTypes = {
    navigation: PropTypes.object,
    loginRequest: PropTypes.func,
    isSubmitting: PropTypes.bool
  };

  handleSubmit = (values, formikBag) => {
    this.props.loginRequest(values.email, values.password);
    formikBag.setFieldValue("password", "");
    formikBag.setFieldTouched("password", false, false);
  };

  renderForm = (
    values,
    handleSubmit,
    setFieldValue,
    errors,
    touched,
    setFieldTouched,
    isValid
  ) => (
    <View style={styles.inputContainer}>
      <AuthInput
        placeholder="Email address"
        value={values.email}
        onChange={setFieldValue}
        onTouch={setFieldTouched}
        name="email"
        error={touched.email && errors.email}
        editable={!this.props.isSubmitting}
      />
      <AuthInput
        placeholder="Password"
        value={values.password}
        onChange={setFieldValue}
        onTouch={setFieldTouched}
        name="password"
        error={touched.password && errors.password}
        editable={!this.props.isSubmitting}
        secureTextEntry
      />
      <ClearButton
        text={BUTTON_TEXT_FORGOTTEN_PASSWORD}
        onPress={() => {}}
        containerStyles={styles.clearButtonContainer}
        buttonTextStyles={styles.clearButtonText}
      />
      <Button
        onPress={handleSubmit}
        disabled={!isValid || this.props.isSubmitting}
        loading={this.props.isSubmitting}
      >
        {BUTTON_TEXT_LOGIN}
      </Button>
    </View>
  );

  render() {
    return (
      <Formik
        initialValues={{ email: "", password: "" }}
        onSubmit={this.handleSubmit}
        validationSchema={yupObject().shape({
          email: yupString()
            .email(ERROR_MESSAGE_INVALID_EMAIL_FORMAT)
            .required(ERROR_MESSAGE_EMAIL_REQUIRED),
          password: yupString()
            .min(12, ERROR_MESSAGE_PASSWORD_MIN_LENGTH)
            .required(ERROR_MESSAGE_PASSWORD_REQUIRED)
        })}
        render={({
          values,
          handleSubmit,
          setFieldValue,
          errors,
          touched,
          setFieldTouched,
          isValid
        }) =>
          this.renderForm(
            values,
            handleSubmit,
            setFieldValue,
            errors,
            touched,
            setFieldTouched,
            isValid
          )
        }
      />
    );
  }
}

const mapStateToProps = state => ({
  isSubmitting: state.auth.isSubmitting
});

export default withNavigation(
  connect(
    mapStateToProps,
    { loginRequest }
  )(LoginForm)
);

(ご参考までに: Formik のisSubmitting値は使用しません。ログイン フローがもう少し複雑で、redux-saga を使用しているためです。)

handleSubmit呼び出されてログイン要求が終了すると、パスワードの値が正しく消去されるようになりました。しかし、フィールドを明示的に触れないように設定しても、パスワードが必要なというエラーメッセージが表示されます。私は何を間違っていますか?

これと関係があるかどうかはわかりませんが、さらに次の警告が表示されます。

Warning: Failed prop type: Invalid prop `error` of type `boolean` supplied to `AuthInput`, expected `string`.

私のAuthInputは次のように見えるので、これは意味がありません:

class AuthInput extends PureComponent {
  handleChange = value => {
    const { onChange, name } = this.props;
    onChange(name, value);
  };

  handleTouch = () => {
    const { onTouch, name } = this.props;
    onTouch(name);
  };

  render() {
    const { placeholder, error } = this.props;
    return (
      <View>
        <TextInput
          autoCapitalize="none"
          autoCorrect={false}
          style={[styles.input, error ? styles.errorInput : null]}
          placeholder={placeholder}
          placeholderTextColor={colors.$lightGrey}
          onChangeText={this.handleChange}
          underlineColorAndroid="transparent"
          onBlur={this.handleTouch}
          {...this.props}
        />
        {error && <Text style={styles.errorText}>{error}</Text>}
      </View>
    );
  }
}

AuthInput.propTypes = {
  placeholder: PropTypes.string,
  name: PropTypes.string,
  error: PropTypes.string,
  onChange: PropTypes.func,
  onTouch: PropTypes.func
};

export default AuthInput;
4

0 に答える 0