Question

当我在renderItem方法中按TouchableOpacity时，出现错误“ _this2.onPressed不是函数”。

我找到了一个有关将函数传递给组件的文档（链接在下面给出）： https://reactjs.org/docs/faq-functions.html

我尝试了这些解决方案，但是没有用。我该如何解决这个问题？我是React Native的新手。

import psycopg2

conn = psycopg2.connect("dbname='db' user='user' host='localhost' password='test'")
cur = conn.cursor()

rows = zip(df.id, df.z)
cur.execute("""CREATE TEMP TABLE codelist(id INTEGER, z INTEGER) ON COMMIT DROP""")
cur.executemany("""INSERT INTO codelist (id, z) VALUES(%s, %s)""", rows)

cur.execute("""
    UPDATE table_name
    SET z = codelist.z
    FROM codelist
    WHERE codelist.id = vehicle.id;
    """)

cur.rowcount
conn.commit()
cur.close()
conn.close()

Answer 1

您可以将render方法更改为以下内容吗？

    ...
    renderItem =({item}) => {
            return(
                <Card>
                    ...
                    ...
                </Card>         
            )        
    }
    ...

我认为您必须绑定render方法。

Answer 2

似乎您也是javascript新手。您声明（或尝试声明）onPressed和renderItem函数的方式不正确。在班级内部改用以下代码：

onPressed = (postID) => {
  this.props.likePost(postID,this.props.id)
}
renderItem = ({item}) => {
    return(
        <Card>
            <View style={{flexDirection:'column',position:'absolute', justifyContent:'space-between'}}>
                <View style={styles.topWrapper}>
                    <View style={styles.imageWrapper}>
                        <Image source={require('../../images/cat.png')}></Image>
                    </View>
                <View style={styles.infoWrapper}>
                    <Text style={styles.nameWrapper}>{item.author_name}</Text>
                    <Text style={{fontSize:14}}>{item.date}</Text>
                </View>
            </View>
            <View style={styles.contentWrapper}>
                <Text style={{fontSize:20}}>{item.content}</Text>
            </View>
                <View styles={styles.likeWrapper}>
                    <Text style={{marginLeft:10, fontSize:18, fontWeight:'bold'}}>{item.likes} likes</Text>
                </View>
                <TouchableOpacity onPress={() => {this.onPressed(item.id)}}>
                    <Icon style={{marginLeft:10}} size={25} name='star-o' />
                </TouchableOpacity>
            </View>
        </Card>         
    )        
}

Answer 3

您已经有了一个答案，但是，只需要详细说明。

为了解决此问题，您必须了解如何在Javascript中使用回调以及上下文（this）。

React在另一个上下文中调用回调方法，您有两个选择。

与此绑定功能；
使用共享上下文的箭头功能（此）。因此，您不需要将它们与上下文绑定。

export default class App extends React.Component {
  onPress() {
    // Not your this so you do not have access to your class
    // In order to bind this function you can put ``this.onPress = this.onPress.bind(this)` on class constructor.
  }

  arrowOnPress = () => {
    // Your class this
    this.onPress();
  };

  render() {
    return (
      <View>
        <Button onPress={this.onPress} title="I am not binded" />
        <Button onPress={this.arrowOnPress} title="I am binded" />
      </View>
    );
  }
}

希望有帮助

_this2.onPressed不是函数

3 个答案: