React Native：无法读取未定义的属性“长度”

问题描述：

我一直在尝试构建注册应用程序，并在尝试将新值提交给服务器时遇到最后阶段的一些问题。React Native：无法读取未定义的属性“长度”

这里是我的脚本：

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

正如你所看到的，我首先定义构造函数，然后定义handlePress()方法，是根据它称为它生成表单的JSX函数内内this.state。

表格某种原因，在按下提交我遇到了以下错误：

Cannot read property 'length' of undefined.

t.value

namefields.js:33:24

Object.onPress

namefields.js:102:56

这是困扰我，因为，正如我所说，我在构造函数中，并呼吁newValue形式函数中定义的状态被输入。

我的代码有什么问题？

答

将传递给onChangeText处理程序的参数不包括event对象。从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.

因此改变：

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

到：

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

......处处，你必须onChangeText =

谢谢你的答案。现在，如果永远不会输入，并且其他操作始终处于执行状态，则即使所有字段都已正确填写，也会显示“输入字段值已丢失” 。任何想法@trincot？ –

您从不在'onChangeText'处理程序中设置密码字段。你在'onChangeText'处理程序中有两次'email'。第二个应该是'password'。 – trincot

感谢@trincot，一直在看这个文件太久了。 –

答

绑定handlePress在构造函数中：

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

@ slacerda7仍然得到了同样的问题后实施在构造函数 –

React Native：无法读取未定义的属性“长度”

相关推荐