undefined 不是 React Native 中的对象（评估函数）

Question

Hi I'm new in react native and I'm working on a sample chat app.Currently I'm facing a basic problem of navigation. Any help is appreciated.

I need to navigate from chat list to chat screen on click. Im using android emulator using Android studio. For this I wrote the script. But Im getting error when I click on a right_arrow having onPress function defined in the following code,

onContactPress = (item) =>{
      Alert.alert();        
}    

renderFlatListItem({item}) {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => this.onContactPress(item)} >
        <Image style={styles.rightArrow}
          source={require('../../images/right_arrow.png')}/> 
      </TouchableOpacity>
    </View>
   )  
}

and the the error is

undefined is not an object (evaluating '_this3.onContactPress()')

What I'm doing wrong here? Is there a way to pass the contact details of the selected person to the next screen? Please help me out.

Answer 1

This is in a React Class o functional component ?

In case of the 2nd call simply onContactPress without this, if your case is the first maybe you have a babel issue.

Answer 2

ok try this solution

change your onContactPress

from

onContactPress = (item) =>{
  Alert.alert();        
 }    

to

onContactPress({item}) {
      Alert.alert();        
}    

because fat arrow functions should be defined outside the class

Answer 3

You probably have solved the issue by now. I'm new to React-Native myself and I came across your question after facing the same issue and I realized that the answer was in front of me all along.

Error Prone Script

I have a component with a state that contains an array of names created using the constructor method. Ideally, when rendered this is the layout I was expecting on my Android device A list of User names and from there since I have assigned a key attribute and the value of the name's array index, when a user name is clicked I wanted to console.log(i), (i) being the index provided as a argument to the getValue() function in the onPress={} event listener.

But instead this is what I was getting the TypeError: undefined is not an object (evaluating 'this.getValues') error.

I tried reading docs, I googled, I looked at previously working codes, I did everything and nothing worked.

Nothing worked until I changed my renderName method from this

getValues(i){
    console.log(i);
}
renderName(){
    return this.state.names.map(function(name,i){
        return (
            <View>
                <TouchableHighlight
                    key={i}
                    style={styles.viewName}
                    onPress={() => this.getValues(i)}>
                        <Text style={styles.name}>{name}</Text>
                </TouchableHighlight>
            </View>
        )
    })
}

To this

getValues(i){
    console.log(i);
}
renderName(){
    return this.state.names.map((name,i) => {
        return (
            <View>
                <TouchableHighlight
                    key={i}
                    style={styles.viewName}
                    onPress={() => this.getValues(i)}>
                        <Text style={styles.name}>{name}</Text>
                </TouchableHighlight>
            </View>
        )
    })
}

The only difference is that I used a fat arrow function this.state.names.map((name,i) => { instead of the normal one this.state.names.map(function(name,i){

After making that change the results are what I was expecting Clicking a user name output the index associated with the name in the array

This may not solve your problem but I'll state it anyway through the following points

• I caused my problem by trying to be too familiar with a Library I've basically just started learning.
• Not every new error should make us panic, that's when we start asking bunch of questions rather than being calm enough to realize that the cause of the error is in front of us.
• Experimenting with code is a good thing while you are learning but make sure that the code works as the tutorial instructs and that you fully understand it before you start making changes and playing around with it.

Answer 4

According to me you might be using Functional Component and in functional component you can call methods directly without using this. Just add const keyword outside the method and call without this keyword.

Answer 5

OnPress takes a function, instead, you're sending an encapsulated function.

Try this

onContactPress = (item) =>{
  Alert.alert();        
}    

renderFlatListItem({item}) {
return (
<View style={styles.container}>
  <TouchableOpacity onPress={this.onContactPress(item)} >
    <Image style={styles.rightArrow}
      source={require('../../images/right_arrow.png')}/> 
  </TouchableOpacity>
</View>
)  
}