Question

我正在尝试制作一个基本的登录屏幕。但是，我正在努力进行电子邮件验证。

每当我按下一个按钮时，我要确保用户输入正确的电子邮件格式，或者如果他们写的不是有效的电子邮件，则在电子邮件TextInput下给他们一个小的警报（默认情况下，此警报将被隐藏。）。但是，当我尝试时，总是会出现此错误（无论用户输入如何）：

undefined is not an object (evaluating 'this.state.username')

到目前为止，这是我的代码

class HomeScreen extends Component {
 state = { username: null, password: null }
 show = false;

 _validar = (text) => {
  let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;

  if(reg.test(text) === false) {
    return false;
  } else {
    return true;
  }
 }

 _onSubmit() {
  if(this._validar(this.state.username) == true) {
    const { username, password } = this.state;
  } else {
    this.show = true;
  }
 }

 render() {
  return (
   <KeyboardAwareScrollView contentContainerStyle={styles.container} scrollEnabled 
   enableOnAndroid={true} resetScrollToCoords={{x:0, y:0}}> 
    <View style={styles.logo}>
     <Image source = {logo} style={styles.img}/>
     <Text style={styles.textLogoPrimary}>Neuron App</Text>
     <Text style={styles.textLogoSecondary}>Test</Text>
    </View>

    <View style={styles.formElement}>
     <Text style={styles.formText}>Correo Electrónico</Text>
     <TextInput keyboardType='email-address' placeholder='Email' onChangeText={value => this.setState({ username: value })} 
     style={styles.formInput} />
     {this.state.show ? (
       <Text style={styles.textAlert}>Correo Electrónico no valido.</Text> 
     ) : null}       
    </View>

    <View style={styles.formElement}>
     <Text style={styles.formText}>Contraseña</Text>
     <TextInput style={styles.formInput} onChangeText={value => this.setState({ password: value })} secureTextEntry={true}/>
    </View>

    <View style={styles.buttonView}>
     <TouchableOpacity style={styles.button} onPress={this._onSubmit}>
      <Text style={styles.buttonText}>Iniciar</Text>
     </TouchableOpacity>
    </View>     
  </KeyboardAwareScrollView>
 );
}}

Answer 1

只需将您的onSubmit功能更改为“

 _onSubmit = () =>{
  if(this._validar(this.state.username) == true) {
    const { username, password } = this.state;
  } else {
    this.show = true;
  }
 }

ES ^自动将此绑定。希望它能解决错误

Answer 2

引发此错误是因为您正在分配this.state.username之前对其进行访问。我建议您将username的初始状态值更改为字符串，因为它最终是字符串，而不是null。

state = { username: '', password: '' };

只需为null分配一个空字符串，就可以避免

''在字符串情况下。如果您要对其进行逻辑评估，则它会与null相同，因为它是'falsy'。

按下按钮时验证电子邮件地址

2 个答案: