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 的新手，在遇到同样的问题后我遇到了你的问题，我意识到答案一直在我面前。

容易出错的脚本

我有一个组件，其状态包含使用构造函数方法创建的名称数组。 理想情况下，渲染时这是我在我的 Android 设备上期望的布局用户名列表，因为我已经分配了一个键属性和名称数组索引的值，当单击用户名时我想控制台。 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){

进行更改后，结果正是我所期望的单击用户名输出与数组中的名称相关联的索引

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

• 我试图过于熟悉一个我基本上刚刚开始学习的库，从而导致了我的问题。
• 并不是每一个新的错误都应该让我们恐慌，那是我们开始问一堆问题而不是足够冷静地意识到错误的原因就在我们面前的时候。
• 在学习期间尝试代码是一件好事，但请确保代码按照教程的指示工作，并且在开始进行更改和尝试之前完全理解它。

Answer 4

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

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