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

Question

您好，我是 react native 的新手，我正在开发一个示例聊天应用程序。目前我面临一个基本的导航问题。任何帮助表示赞赏。

我需要在点击时从聊天列表导航到聊天屏幕。我正在使用使用 Android Studio 的 android 模拟器。为此，我编写了脚本。但是，当我单击在以下代码中定义了 onPress 函数的 right_arrow 时出现错误，

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>
   )  
}

错误是

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

我在这里做错了什么？有没有办法将所选人员的联系方式传递到下一个屏幕？请帮帮我。

Answer 1

这是在一个 React Class o 功能组件中吗？

如果第二次调用只是 onContactPress 没有这个，如果你的情况是第一次，那么你可能遇到了 babel 问题。

Answer 2

好的，试试这个解决方案

改变你的 onContactPress

来自

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

到

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

因为胖箭头函数应该在类之外定义

Answer 3

您现在可能已经解决了这个问题。我自己是 React-Native 的新手，在遇到同样的问题后遇到了你的问题，我意识到答案一直摆在我面前。

Error Prone Script

我有一个组件，其状态包含使用构造函数方法创建的名称数组。 理想情况下，当呈现这是我在我的 Android 设备 A list of User names 上所期望的布局时，因为我已经分配了一个键属性和名称的数组索引的值，所以当单击用户名时，我想 console.log( i), (i) 是作为参数提供给 onPress={} 事件侦听器中的 getValue() 函数的索引。

但这就是我得到TypeError: undefined is not an object (evaluating 'this.getValues') 错误的原因。

我尝试阅读文档、谷歌搜索、查看以前工作的代码，我做了所有事情，但没有任何效果。

在我更改我的 renderName 方法之前，没有任何效果

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>
        )
    })
}

到这里

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>
        )
    })
}

唯一的区别是我使用了一个粗箭头函数 this.state.names.map((name,i) => { 而不是普通的 this.state.names .map(function(name,i){

做出改变后，结果是我所期待的Clicking a user name output the index associated with the name in the array

这可能无法解决您的问题，但我会通过以下几点说明它

• 我的问题是因为我试图对一个我基本上刚刚开始学习的库过于熟悉。
• 不是每个新错误都应该让我们感到恐慌，这时我们开始提出一堆问题，而不是足够冷静地意识到错误的原因就在我们面前。
• 在学习过程中使用代码进行实验是一件好事，但请确保代码按照教程的说明运行，并且在开始进行更改和尝试之前完全理解它。

Answer 4

根据我的说法，您可能正在使用功能组件，并且在功能组件中您可以直接调用方法而不使用它。只需在方法外部添加 const 关键字，然后在没有 this 关键字的情况下调用即可。

Answer 5

OnPress 接受一个函数，而您发送的是一个封装函数。

试试这个

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>
)  
}