Реактивный экран входа в систему - ошибка при нажатии кнопки входа в систему с пустыми полями входа

Question

У меня есть простой экран входа в систему, который запрашивает адрес электронной почты и пароль.

Экран входа в систему

Если нажата кнопка «Вход» и оба изполя пустые Я получаю эту ошибку: «null не является объектом (оценивающим__this.state.Email ')»

Экран ошибки

Вот код:

import React, {Component} from 'react';
import {View, Button, ScrollView, AsyncStorage, Alert } from 'react-native';
import colors from '../config/colors';
import { TextInput } from '../components/TextInput';

class SignIn extends Component {
    signIn = () => {

        const {Email} = this.state;
        const {Password} = this.state;

        fetch('http://192.168.1.3/Restaurant_App/php/sign_in.php', {
            method: 'POST',
            headers: {
            'Accept': 'application/json',
            'Content-Type': 'application.json',
            },
            body: JSON.stringify({
            email: Email,
            password: Password,
            })
        }).then((response) => response.json())
        .then((responseJson) => {
            if (responseJson == Email) {
                Alert.alert(responseJson);
                AsyncStorage.setItem('email', Email);
                this.props.navigation.navigate('Search');
            } else {
                Alert.alert(responseJson);
            }
        }).catch((error) => {
            console.error(error);
        });
    };
    render() {
        return (
            <View>
                <ScrollView style={{ backgroundColor: colors.background }}>
                    <TextInput
                        placeholder="Email..."
                        onChangeText={Email => this.setState({Email})}
                    />
                    <TextInput
                        placeholder="Password..."
                        secureTextEntry={true}
                        onChangeText={Password => this.setState({Password})}
                    />
                </ScrollView>
                <Button
                    onPress={() => this.signIn()}
                    title="Sign In"
                />
            </View>
        );
    }
}
export default SignIn;

Мне бы хотелось, чтобы при нажатии кнопки «Вход» с пустыми полями я не получил эту ошибку.Вместо этого должно быть предупреждение «Пожалуйста, заполните все поля».или что-то в этом роде.

Answer 1

Перед выполнением запроса на выборку необходимо выполнить некоторые проверки правильности.

Вы можете сделать что-то вроде этого

signIn = () => {

    const {Email, Password} = this.state;
    if(!this.checkDetails(Email, Password) {
      // you could show an alert here, but it is not great UX, 
      // you should show your user where they have gone wrong, 
      // by making style changes, a red border around the TextInput, 
      // text explaining what has gone wrong.
      return;
    }

    fetch('http://192.168.1.3/Restaurant_App/php/sign_in.php', {
        ...
    }).then((response) => response.json())
    .then((responseJson) => {
        ...
    }).catch((error) => {
        console.error(error);
    });
};

checkDetails = (Email, Password) => {

  // check that it is a valid email address
  // this is a regex that I have used in the past to check email addresses.
  const emailIsValid = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(Email);

  // if the password has a minimum length then you should use that rather than 0
  this.setState({emailIsValid, passwordIsValid: Password.length > 0});
  if (emailIsValid && Password.length > 0) return true;
  return false;
}

Используя эти новые значения состояния для действительного адреса электронной почты и пароля, вы могли быустановите дополнительные стили и текст ошибки рядом с полями, которые неправильны или отсутствуют.

<TextInput
   placeholder="Email..."
   onChangeText={Email => this.setState({Email})}
   styles={this.state.emailIsValid ? styles.validEmail : styles.invalidEmail}
 />
 {!this.state.emailIsValid && <Text>Please input a valid email</Text>}
 <TextInput
   placeholder="Password..."
   secureTextEntry={true}
   onChangeText={Password => this.setState({Password})}
   styles={this.state.passwordIsValid ? styles.validPassword : styles.invalidPassword}
 />
 {!this.state.passwordIsValid && <Text>Please input a valid password</Text>}

Не нужно настраивать ваши стили для различных состояний.

const styles = StyleSheet.create({
  validEmail: {},
  validPassword: {},
  invalidEmail: {},
  invalidPassword: {}
});

You 'Возможно, вы захотите добавить значения начального состояния для emailIsValid и passwordIsValid, чтобы они были установлены в true, чтобы отображались правильные стили.Также вы должны определить начальное состояние для электронной почты и пароля.

Добавьте конструктор в свой класс

constructor (props) {
   super(props);
   this.state = {
       Email: '',
       Password: '',
       emailIsValid: true,
       passwordIsValid: true
   }
}

Надеюсь, это поможет.

Answer 2

Вы можете сделать в верхней части функции входа что-то вроде этого:

If(this.state.email.length === 0  || this.state.password.length === 0) {
alert(“please complete the fields”);
return;}