"TypeError: undefined is not an object (evaluating 'this.state.firstName')" 使用类组件

Question

import React from 'react'
import {
View,
Button,
TextInput,
StyleSheet,
Alert,
ScrollView
} from 'react-native'
import axios from 'axios';

export default class Add extends React.Component {
static navigationOptions = {
title: 'Add',
headerStyle: {
backgroundColor: '#f4511e',
},
//headerTintColor: '#0ff',  
headerTitleStyle: {
fontWeight: 'bold',
}
};
constructor() {
super();
this.state = {
firstName: ' ',
middleName: ' ',
lastName: ' ',
email: ' ',
password: ' ',
mobileNumber: ' ',
dob: ' ',
genderType: ' ',
bloodGroup: ' ',
geoName: ' ',
countryName: ' ',
locationName: ' '
}

this.firstName = this.firstName.bind(this);
this.middleName = this.middleName.bind(this);
this.lastName = this.lastName.bind(this);
this.email = this.email.bind(this);
this.password = this.password.bind(this);
this.mobileNumber = this.mobileNumber.bind(this);
this.dob = this.dob.bind(this);
this.genderType = this.genderType.bind(this);
this.bloodGroup = this.bloodGroup.bind(this);
this.onPress = this.register.bind(this);
}

firstName(event) {
console.log(this.state.firstName)
this.setState({ firstName: event.target.value })
}
middleName(event) {
this.setState({ middleName: event.target.value })
}
lastName(event) {
this.setState({ lastName: event.target.value })
}
email(event) {
this.setState({ email: event.target.value })
}
password(event) {
this.setState({ password: event.target.value })
}
mobileNumber(event) {
this.setState({ mobileNumber: event.target.value })
}
dob(event) {
this.setState({ dob: event.target.value })
}
genderType(event) {
this.setState({ genderType: event.target.value })
}
bloodGroup(event) {
this.setState({ bloodGroup: event.target.value })
}

register(event) {

fetch('http://139.59.72.125:1337/apply/create', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({

firstName: this.state.firstName,
middleName: this.state.middleName,
lastName: this.state.lastName,
email: this.state.email,
password: this.state.password,
mobileNumber: this.state.mobileNumber,
dob: this.state.dob,
genderType: this.state.genderType,
bloodGroup: this.state.bloodGroup
})
}).then((Response) => Response.json())
console.log(this.state.firstName)
.then((Result) => {
if (Result.Status == 'Success')
alert('SuccessFully Added')
else
alert('Sorrrrrry !!!! Un-authenticated User !!!!!')
})
}
render() {
return (
<ScrollView>
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='FirstName'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.firstName}
/>
<TextInput
style={styles.input}
placeholder='Midlle Name'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.middleName}
/>
<TextInput
style={styles.input}
placeholder='LastName'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.lastName}
/>
<TextInput
style={styles.input}
placeholder='Email'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.email}
/>
<TextInput
style={styles.input}
placeholder='Password'
secureTextEntry={true}
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.password}
/>
<TextInput
style={styles.input}
placeholder='Phone Number'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.mobileNumber}
/>
<TextInput
style={styles.input}
placeholder='Date of Birth'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.dob}
/>
<TextInput
style={styles.input}
placeholder='Gender'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.genderType}
/>
<TextInput
style={styles.input}
placeholder='Blood Group'
autoCapitalize="none"
placeholderTextColor='white'
onChange={this.bloodGroup}
/>
<Button
title='Add'
onPress={this.register}
/>
</View>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
input: {
width: 300,
height: 40,
backgroundColor: '#42A5F5',
margin: 10,
padding: 8,
color: 'white',
borderRadius: 14,
fontSize: 18,
fontWeight: '500',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})

当我们点击添加按钮时，它显示了未定义的错误。在Api中，我需要使用类组件添加细节，从它没有传递到Api的字段中添加细节。json格式的动态传递值。使用构造函数

Undefined is not an object evaluating this.state
It is redirect to home screen
[Mon Nov 02 2020 10:26:00.404]  ERROR    TypeError: undefined is not an object (evaluating 'this.state.firstName')
[Mon Nov 02 2020 10:26:10.301]  ERROR    TypeError: undefined is not an object (evaluating 'this.state.firstName')

Answer 1

"register"函数不绑定此项。您可以在构造函数中添加this.register=this.register.bind(this(，或者使用"react autobind">