禁止道具名称?

时间:2018-11-20 10:37:27

标签: ios react-native

任何保留类名列表吗?

我名为Event的组件出现问题 它包含在EventsList组件中。 当我尝试过滤列表时,出现此错误:

TypeError: posts..map is not a function

This error is located at:
   in UserPost(created by Connect(UserPosts))

但是当我去那里的时候,我看上去很好,一切都可以覆盖禁止代码...还有其他保留名称吗?

这是和平的代码:

class UserPosts extends Component {
    static navigatorButtons = {
        leftButtons: Platform.OS === 'ios' ?
        [
            {
                title:'Go back',
                id:'goBack'
            }
        ]
        :null
    }

    constructor(props){
        super(props);

        this.state = {
            image:'',
            posts:[],
            modal:false
        }


        if(Platform.OS === 'ios'){
            this.props.navigator.setOnNavigatorEvent((event)=>{
                if(event.id === 'goBack'){
                    this.props.navigator.dismissAllModals({
                        animationType:'slide-down'
                    })
                }
            })
        }
    }

    componentDidMount(){
        const UID = this.props.User.userData.uid;
        this.props.getUserPosts(UID);
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.User.userPosts){
            this.setState({
                posts: nextProps.User.userPosts
            })
        }
    }

    showConfirm = (ID) => {
        this.setState({
            modal:true,
            toDelete:ID
        })
    }

    deletePost = (ID) => {
        this.props.deleteUserpost(ID,this.props.User.userData).then(()=>{
            const UID = this.props.User.userData.uid;
            this.props.getUserPosts(UID);

            this.setState({
                modal:false,
                toDelete:''
            });
        })
    }

我已经检查了代码,因为当我消除该错误时,该按钮不起作用,它可以运行,但是返回按钮不起作用。

    showPosts = (posts) => (
        posts ?
            posts.map( item => (
                <View style={styles.itemWrapper} key={item.id}>
                    <View>
                        <Image
                            source={{uri:this.state.itemImage}}
                            style={{width:'100%',height:200}}
                        />
                    </View>
                    <View style={styles.itemTitle}>
                        <Text style={{
                            fontFamily: 'Roboto-Black'
                        }}>{item.title}</Text>
                    </View>
                    <View style={styles.itemDescription}>
                        <Text>{item.description}</Text>
                        <Text>{item.location}</Text>
                        <View style={{marginTop:10}}>
                            <Text style={styles.small}>PRICE: $ {item.price}</Text>
                            <Text style={styles.small}>CATEGORY: $ {item.category}</Text>
                        </View>
                    </View>

                    <View style={styles.buttons}>
                        <TouchableOpacity
                            onPress={()=> this.showConfirm(item.id)}
                        >
                            <Text
                                style={{
                                    fontFamily:'Roboto-Black',
                                    color: '#F44336',
                                    paddingBottom:10
                                }}>
                                Delete Post
                            </Text>
                        </TouchableOpacity>
                    </View>

                    <Modal
                        animationType="slide"
                        transparent={false}
                        visible={this.state.modal}
                    >
                        <View style={{padding:50}}>

                            <Text style={{fontSize:20}}>
                                Are you sure you want to delete the post ?
                            </Text>

                            <View style={{marginTop:50}}>
                                <TouchableOpacity
                                    onPress={()=> this.deletePost(this.state.toDelete)}
                                >
                                    <Text style={styles.modalDelete}>Delete</Text>
                                </TouchableOpacity>

                                <TouchableOpacity
                                    onPress={()=>{
                                        this.setState({
                                            modal:false,
                                            toDelete:''
                                        })
                                    }}
                                >
                                     <Text style={styles.modalClose}>No? keep it</Text>
                                </TouchableOpacity>

                            </View>

                        </View>
                    </Modal>


                </View>
            ))
        :null
    )

    render(){
        console.log("POSTS: ", this.state.posts)
        return(
           <ScrollView>
               <View style={styles.container}>
                    <View style={{
                        marginBottom:30
                    }}>
                        <Text>You have {this.state.posts.length} posts</Text>
                    </View>

                    {this.showPosts(this.state.posts)}

               </View>
           </ScrollView>
        )
    }
}

谢谢。

0 个答案:

没有答案