I build an App with a simple Api call for showing Images and Comments. so long so good. on one of my components I give the Image Url in and render these and its all fine, but after I get the comments and setState the Component don't re-render and show the comments. can anyone take a look and say what I do wrong
thanks a lot
import React, { Component } from 'react';
import { ScrollView, View, Text, StyleSheet, Alert } from 'react-native';
import lighthouseStyles from './lighthouse.styles';
import PhotoView from 'react-native-photo-view';
import { FooterTab } from 'native-base';
import Icon from 'react-native-vector-icons/Entypo';
import UserLifeMemoriesManager from '../Manager/UserLifeMemoriesManager';
export default class SingleView extends Component {
constructor(props) {
super(props);
let url = this.props.navigation.getParam('ImageUrl', 'ups not work ');
let id = this.props.navigation.getParam('id', 0);
this.state = {
Imageurl: url,
arrayComments: '',
id: id
};
UserLifeMemoriesManager.getMemoryDetails(this.state.id).then(Details => {
this.setstate = {
arrayComments: Details,
commentsArray: Details.response.data.memory.comments
};
});
}
deleteMemory() {
Alert.alert(
'löschen',
'Erinnerung wirklich löschen?',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
},
{
text: 'OK',
onPress: () => {
UserLifeMemoriesManager.deleteMemory(this.state.id).then(
response => {
this.props.navigation.goBack();
console.log(response);
}
);
}
}
],
{ cancelable: false }
);
}
WholeComments() {
if (this.state.commentsArray) {
return this.state.commentsArray.map(function(news, i) {
return (
<View key={i}>
<Text>{news.created}</Text>
<View>
<Text>{news.content}</Text>
</View>
</View>
);
});
}
}
render() {
return (
<ScrollView sytle={styles.container}>
<PhotoView
source={{ uri: this.state.Imageurl }}
minimumZoomScale={1}
maximumZoomScale={3}
androidScaleType="fitCenter"
onLoad={() => console.log('Image loaded!')}
style={{ width: 420, height: 550 }}
/>
{this.WholeComments()}
<View style={{ height: 42 }}>
<FooterTab style={{ backgroundColor: '#dadcce' }}>
<Icon.Button
backgroundColor="#dadcce"
color="#000000"
name="bucket"
size={30}
marginLeft={12}
padding={6}
onPress={() => {
this.deleteMemory();
}}
/>
</FooterTab>
</View>
</ScrollView>
);
}
}
SingleView.navigationOptions = ({ navigation }) => ({
title: 'SingleView'
});
const styles = StyleSheet.create(lighthouseStyles, {
container: {
justifyContent: 'center',
alignItems: 'center'
}
});
You have a typo error and also is a function in line 20:
this.setstate = {
...
}
and it must be:
this.setState({
...
})
For more information about the setState function: https://reactjs.org/docs/react-component.html#setstate
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.