“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

“注册”功能不绑定它。 您可以在构造函数中添加 this.register = this.register.bind(this) ，或使用 'react-autobind'