_this2.onpressed不是一个函数

Question

当我在RenderItem方法内按TOINableOpacity时，我会收到一个错误" _this2.onpressed不是函数。

我找到了有关将功能传递给组件的文档(链接如下(：https://reactjs.org/docs/faq-functions.html

我尝试了这些解决方案，但它不起作用。如何解决此问题？我是新手反应本地的。

import React, { Component } from 'react';
import { Text, FlatList,View, StyleSheet, TouchableOpacity, Image} from 'react-native';
import { connect } from 'react-redux';
import {fetchPosts,likePost} from '../../actions'
import {Card} from '../Card';
import Icon from 'react-native-vector-icons/FontAwesome'

class PostScreen2 extends Component {
    constructor(props){
        super(props)
        this.onPressed = this.onPressed.bind(this)
    }
    shouldComponentUpdate(nextProp, nextState){
        console.log("Should component update")
        return true
    }
    componentDidMount(){
        const {id} = this.props
        console.log("ID'miz: ", id)
        this.props.fetchPosts(id)
    }
    componentDidUpdate(){
        console.log("Component did update.")
    }
    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>         
        )        
    }
    render() {
        const {posts} = this.props
        return (
            <FlatList
            data={posts}
            renderItem={this.renderItem}
        />
        );
    }
}

const mapStateToProps = state => {
    var posts = []
    for (var property in state.posts.data) {
      posts = state.posts.data[property]
    }
    return {
        posts,
        id: state.id
    }
}
const styles = StyleSheet.create({
    titleWrapper:{
        fontSize: 16,
        color: 'black'
    },
    authorWrapper: {
        fontSize: 14,
        color: 'gray'
    },
    descriptionWrapper: {
        marginLeft: 10,
        marginRight: 10,
        fontSize: 13,
        color: 'gray'
    },
    imageWrapper: {
        marginLeft: 10,
        marginTop: 10
    },
    nameWrapper: {
      fontWeight: 'bold',
      fontSize: 20
    },
    infoWrapper:{
      marginLeft: 10,
      marginTop: 10
    },
    topWrapper:{
      flex: 1,
      flexDirection: 'row'
    },
    contentWrapper: {
      marginLeft: 10,
      marginRight: 10,
    },
    likeWrapper: {
      fontSize: 18,
      fontWeight: 'bold'
    }
})

export default connect(mapStateToProps, {fetchPosts,likePost})(PostScreen2);

Answer 1

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

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

我认为您必须绑定渲染方法。

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

希望它有帮助