更新状态未更新视图

Question

我目前正在学习React Native。我已经建立了一个视图，当数据被提取时，它应该显示一个文本Loading，并且应该在应用程序收到数据后显示数据。该应用程序正在访问后端服务器并获取URL(在应用程序上尝试console.error，它确实弹出了显示正确数据详细信息的屏幕)。

问题是视图没有更新。另一件奇怪的事情是，条件视图显示了为容器设置的边界，但除此之外，它不显示任何文本或数据。即使我把正确的数据。不确定条件是否得到正确验证。

我提到的边界是在样式表的articleContainer中设置的，并与条件为this.state.hasResult的容器一起附加

如果我从该视图中删除样式，则边界明显会消失，但即使在视图中放置静态文本也不会显示(如果我错误地解析了json，则会选中)。这似乎有点令人困惑。

var constants = require("../constants")
var React = require('react');
var ReactNative = require('react-native');
var t = require('tcomb-form-native');
var authenticate = require("../services/authenticate")
var {
AppRegistry,
AsyncStorage,
StyleSheet,
Text,
View,
TouchableHighlight,
Alert,
ListView,
Image,
} = ReactNative;
const options = {}
class RecipePage extends React.Component{
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.id !== r2.id});
var getData = require("../services/get_featured");
var par = this;
var recipeId = props.recipeId;
this.state ={
hasResult: false,
noResult: false,
result: null,
isLoading: true,
}
getData(recipeId).then(function(data){
par.setState(
{
result:data,
hasResult:true,
noResult:false,
isLoading:false
}
)
}).catch(function(error) {
console.error(error);
});
}
goBack(){
this.props.navigator.pop();
}
render() {
return (
<View style={styles.container}>
<View style={styles.row}>
<Text style={styles.title}>Recipe</Text>
<TouchableHighlight onPress={this.goBack.bind(this)}>
<Image style={styles.back}
source={require("../static/images/back.png")}
/>
</TouchableHighlight>
</View>
{
this.state.hasResult &&
<View style={styles.article_container} >
<Text style={styles.article_title} >{this.state.result.id}</Text>
<Image style={styles.article_img}
source={{uri: this.state.result.image_link}}
/>
</View>
}
{
this.state.isLoading &&
<View style={styles.article_container} >
<Text style={styles.article_title} >Loading</Text>
</View>
}
</View>
);
}
}
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 25,
padding: 20,
backgroundColor: '#ffffff',
},
title: {
fontSize: 30,
alignSelf: 'center',
marginBottom: 30
},
article_container: {
justifyContent: 'center',
marginTop: 5,
padding: 20,
backgroundColor: '#ffffff',
borderBottomColor: '#555555',
borderBottomWidth: 1,
flex:1
},
article_title: {
fontSize: 25,
alignSelf: 'center',
marginBottom: 3,
flex:2
},
article_img: {
width:200,
height:200,
alignSelf: 'center',
flex:1
},
article_description :{
fontSize:15,
flex:3
},
back:{
backgroundColor:'#ffffff',
width:20,
height:20
}
});
module.exports =  RecipePage;

如果你认为我可以改进与这个问题无关的代码，请随时评论并启发我：)

编辑：

我玩了更多，发现如果我把附加的样式改为：-

<View style={styles.row} >
<Text style={styles.title} >{this.state.result.title}</Text>
<Image 
source={{uri: this.state.result.image_link}}
/>
</View>

来自

<View style={styles.article_container} >
<Text style={styles.article_title} >{this.state.result.id}</Text>
<Image style={styles.article_img}
source={{uri: this.state.result.image_link}}
/>
</View>

我可以在进行此更改后查看标题，但图像仍然无法显示。我不知道为什么它没有出现在另一种风格中。即使其中一个样式附加了->article_title或article_container，它也不会被显示。

编辑2:

即使我手动应用样式，它也不会像那样显示

<Text style={{fontSize: 25,alignSelf: 'center',marginBottom: 3,flex:2}} >{this.state.result.title}</Text>

我从一个使用类似样式的列表视图的父级导航到这个页面，它在那里显示得很完美。

Answer 1

问题似乎是我在样式中使用了flex属性，而没有使用ScrollView或ListView。我会对此进行更多的研究并更新答案。