任何保留类名列表吗?
我名为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>
)
}
}
谢谢。