javascript - TypeError: TypeError: null is not an object (evaluating 'this.state.email') - Stack Overflow

admin管理员组

文章数量:1406926

export default class Login extends React.Component {
    static navigationOptions = {
        title: 'Wele',
        header: null
    };
    constructor(props) {
        super(props);
        state = {
            email: "",
            password: ""
        }
    }
    handleEmail = (text) => {
        this.setState({
            email: text
        })
    }
    handlePassword = (text) => {
        this.setState({
            password: text
        })
    }
    validEmail = Email => {
            var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]  {
                2,
                4
            }) + $ /
        return email.test(Email)
}
onClickListener = (viewId) => {
    Alert.alert("Alert", "Button pressed " + viewId);
}
onSubmit() {
    if (this.state.email === "" || this.state.email === null) {
        alert("Email cannot be empty")
    } else if (!this.validEmail(this.state.email)) {
        alert("Enter valid Mail id")
    } else if (this.state.password === "" || this.state.password === null) {
        alert("Password cannot be empty")
    } else if (this.state.password.length < 6) {
        alert("Password should contain atleast 6 characters")
    } else {
        alert("success")
        this.props.navigation.navigate('ScrollTab');
    }
}
render() {
    return ( <
        View style = {
            styles.container
        } >
        <
        Text style = {
            styles.LogoText
        } > Blood Donation App < /Text> <
        View style = {
            styles.inputContainer
        } >
        <
        TextInput style = {
            styles.inputs
        }
        placeholder = "Email"
        keyboardType = "email-address"
        onChangeText = {
            (text) => this.handleEmail(text)
        }
        underlineColorAndroid = 'transparent' / >
        <
        Image style = {
            styles.inputIcon
        }
        source = {
            {
                uri: '.png'
            }
        }
        /> <
        /View>     <
        View style = {
            styles.inputContainer
        } >
        <
        TextInput style = {
            styles.inputs
        }
        placeholder = "Password"
        secureTextEntry = {
            true
        }
        onChangeText = {
            (text) => this.handlePassword(text)
        }
        underlineColorAndroid = 'transparent' / >
        <
        Image style = {
            styles.inputIcon
        }
        source = {
            {
                uri: '.png'
            }
        }
        /> <
        /View>      <
        TouchableOpacity style = {
            styles.btnForgotPassword
        }
        onPress = {
            () =>
            this.onClickListener('restore_password')
        } >
        <
        Text style = {
            styles.btnText
        } > Forgot your password ? < /Text> <
        /TouchableOpacity> <
        TouchableOpacity style = {
            [styles.buttonContainer,
                styles.loginButton
            ]
        }
        onPress = {
            () => this.onSubmit()
        } >>
        <
        Text style = {
            styles.loginText
        } > Login < /Text> <
        /TouchableOpacity>         <
        /View>
    );
}
}

// working on validations for email and password.. if directly clicked onsubmit it is showing error that null undefined. should i set state to some default value? error is : TypeError: TypeError: null is not an object (evaluating 'this.state.email') onsubmit error and if i add value={this.state.email} in its is also giving error that null is undefined

export default class Login extends React.Component {
    static navigationOptions = {
        title: 'Wele',
        header: null
    };
    constructor(props) {
        super(props);
        state = {
            email: "",
            password: ""
        }
    }
    handleEmail = (text) => {
        this.setState({
            email: text
        })
    }
    handlePassword = (text) => {
        this.setState({
            password: text
        })
    }
    validEmail = Email => {
            var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]  {
                2,
                4
            }) + $ /
        return email.test(Email)
}
onClickListener = (viewId) => {
    Alert.alert("Alert", "Button pressed " + viewId);
}
onSubmit() {
    if (this.state.email === "" || this.state.email === null) {
        alert("Email cannot be empty")
    } else if (!this.validEmail(this.state.email)) {
        alert("Enter valid Mail id")
    } else if (this.state.password === "" || this.state.password === null) {
        alert("Password cannot be empty")
    } else if (this.state.password.length < 6) {
        alert("Password should contain atleast 6 characters")
    } else {
        alert("success")
        this.props.navigation.navigate('ScrollTab');
    }
}
render() {
    return ( <
        View style = {
            styles.container
        } >
        <
        Text style = {
            styles.LogoText
        } > Blood Donation App < /Text> <
        View style = {
            styles.inputContainer
        } >
        <
        TextInput style = {
            styles.inputs
        }
        placeholder = "Email"
        keyboardType = "email-address"
        onChangeText = {
            (text) => this.handleEmail(text)
        }
        underlineColorAndroid = 'transparent' / >
        <
        Image style = {
            styles.inputIcon
        }
        source = {
            {
                uri: 'https://img.icons8./nolan/40/000000/email.png'
            }
        }
        /> <
        /View>     <
        View style = {
            styles.inputContainer
        } >
        <
        TextInput style = {
            styles.inputs
        }
        placeholder = "Password"
        secureTextEntry = {
            true
        }
        onChangeText = {
            (text) => this.handlePassword(text)
        }
        underlineColorAndroid = 'transparent' / >
        <
        Image style = {
            styles.inputIcon
        }
        source = {
            {
                uri: 'https://img.icons8./nolan/40/000000/key.png'
            }
        }
        /> <
        /View>      <
        TouchableOpacity style = {
            styles.btnForgotPassword
        }
        onPress = {
            () =>
            this.onClickListener('restore_password')
        } >
        <
        Text style = {
            styles.btnText
        } > Forgot your password ? < /Text> <
        /TouchableOpacity> <
        TouchableOpacity style = {
            [styles.buttonContainer,
                styles.loginButton
            ]
        }
        onPress = {
            () => this.onSubmit()
        } >>
        <
        Text style = {
            styles.loginText
        } > Login < /Text> <
        /TouchableOpacity>         <
        /View>
    );
}
}

// working on validations for email and password.. if directly clicked onsubmit it is showing error that null undefined. should i set state to some default value? error is : TypeError: TypeError: null is not an object (evaluating 'this.state.email') onsubmit error and if i add value={this.state.email} in its is also giving error that null is undefined

• javascript
• reactjs
• react-native
• expo

Share Improve this question Follow edited Feb 1, 2019 at 11:40 VLAZ 29.2k99 gold badges6363 silver badges8484 bronze badges asked Feb 1, 2019 at 11:21 pratibhapratibha 9522 silver badges1010 bronze badges 2

• 2 please spend some time making your code readable. – Joe Warner Commented Feb 1, 2019 at 11:23
• In your constructor, it should be 'this.state = {}' – Rakesh Makluri Commented Feb 1, 2019 at 11:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

State can be declared in two ways in statefull/class ponents in react

1. Inside constructor
2. Inside class and outside constructor

Inside constructor:

   constructor(props) {
       super(props);
       this.state = {
          email: "",
          password: ""
       }
 }

Inside class and outside constructor:

     state = {
          email: "",
          password: ""
       }

And you need to add value prop to TextInput element so

Change

  <TextInput style={styles.inputs}
      placeholder="Email"
      keyboardType="email-address"            
      onChangeText={(text) => this.handleEmail(text)}      
      underlineColorAndroid='transparent'/>

To

  <TextInput style={styles.inputs}
      placeholder="Email"
      keyboardType="email-address"
      value={this.state.email}          
      onChangeText={email => this.handleEmail(email)}      
      underlineColorAndroid='transparent'/>

And set email like below

  handleEmail = email => {
     this.setState({
        email: email
     })
   }

In your constructor insert this before state.

this.state = {...}

本文标签： javascriptTypeError TypeError null is not an object (evaluating 39thisstateemail39)Stack Overflow