Réagir natif: Impossible de lire la longueur de la longueur indéfinie

Question

J'ai essayé de créer une application d'enregistrement et je rencontre des problèmes dans les dernières étapes lorsque je tente de soumettre les nouvelles valeurs au serveur.

Voici mon script:

import React from 'react'; 
import ReactNative from 'react-native'; 
import { FormLabel, FormInput,Button,Text } from 'react-native-elements' 
import { AppRegistry,TextInput,View,StyleSheet,length} from 'react-native'; 
import { StackNavigator } from 'react-navigation' 
import AccountFields from './emailandpass' 
import axios from 'axios'; 

let styles = {} 

class NameFields extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     email:'', 
     password:'', 
     first:'', 
     last:'', 
     dob:'' 
    } 
    } 

    componentWillReceiveProps(nextProps){ 
    console.log("nextProps",nextProps); 
    } 

    handlePress(event){ 
    var Url = "http://10.68.14.170:8080"; 
    // console.log("values in register handler",role); 
    var self = this; 

    //To be done:check for empty values before hitting submit 
    if(this.state.first.length>0 && this.state.last.length>0 && this.state.email.length>0 && this.state.password.length>0 && this.state.dob.length>0) 
     { 
     var payload={ 
     "first": this.state.first, 
     "last":this.state.last, 
     "email":this.state.email, 
     "password":this.state.password, 
     "dob":this.state.dob 
     } 
     axios.post(Url+'/useraccount/signup',payload) 
    .then(function (response) { 
     console.log(response.data); 
     if(response.data.code === 200){ 
     <Text> 
      'Tal-ostja' 
     </Text> 
     } 
     else{ 
     console.log("some error ocurred",response.data.code); 
     } 
    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 
    } 
    else{ 
     alert("Input field value is missing"); 
    } 
    } 

    render() { 
    return(
     <View> 
     <FormLabel 
      containerStyle={styles.labelContainerStyle}>Email</FormLabel> 
     <FormInput 
      ref='form2' 
      containerRef='containerRefYOYO' 
      textInputRef='textInputRef' 
      placeholder='Please enter your email address...' 
      onChangeText = {(event,newValue) =>this.setState({email:newValue})} 
     /> 
     <FormLabel containerStyle={styles.labelContainerStyle}>Password</FormLabel> 
     <FormInput 
      ref='form1' 
      placeholder='Please create a password...' 
      onChangeText ={(event,newValue) =>this.setState({email:newValue}) } 
     /> 
     <FormLabel 
      containerStyle={styles.labelContainerStyle}>Name</FormLabel> 
     <FormInput 
      ref='form2' 
      containerRef='containerRefYOYO' 
      textInputRef='textInputRef' 
      placeholder="What's your name ?" 
      onChangeText = {(event,newValue) =>this.setState({first:newValue})} 
     /> 
     <FormLabel containerStyle={styles.labelContainerStyle}>Surname</FormLabel> 
     <FormInput 
      ref='form1' 
      placeholder="What's your last name ?" 
      onChangeText = {(event,newValue) =>this.setState({last:newValue})} 
     /> 
     <FormLabel containerStyle={styles.labelContainerStyle}>Date of Birth</FormLabel> 
     <FormInput 
      ref='form1' 
      placeholder='YYYY-MM-DD' 
      onChangeText = {(event,newValue) =>this.setState({dob:newValue})} 
     /> 
     <Button title="Submit" onPress={(event) => this.handlePress(event)}/> 
     </View> 
    ); 
    } 
} 

module.exports = NameFields 

Comme vous pouvez le voir, je suis d'abord la définition du this.state dans le constructeur définissant alors la méthode handlePress() qui est appelé en dessous dans la fonction JSX qui crée la forme.

forme une raison, à la pression soumettre je rencontre l'erreur suivante:

Cannot read property 'length' of undefined.

t.value

namefields.js:33:24

Object.onPress

namefields.js:102:56

qui me rend perplexe parce que, comme je le disais, je définissais l'état dans le constructeur et dans la fonction formulaire appelé pour newValue être entré.

Quel est le problème avec mon code?

Answer 1

Les arguments qui seront transmis au gestionnaire onChangeText ne comprennent pas l'objet event. De l'docs:

onChangeText function

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

changer donc:

onChangeText = {(event,newValue) =>this.setState({email:newValue})} 

à:

onChangeText = {(newValue) =>this.setState({email:newValue})} 

... partout où vous avez onChangeText =

Answer 2

Bind handlePress dans le constructeur:

constructor(props){ 
    super(props); 
    this.handlePress = this.handlePress.bind(this); 
    this.state={ 
     email:'', 
     password:'', 
     first:'', 
     last:'', 
     dob:'' 
    } 
}