更新状态不更新视图

Question

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

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

我提到的边框是在样式表中的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。 我会对此进行更多研究并更新答案。