javascript - 更新状态不更新 View

Question

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

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

我提到的边框是在样式表的articleContainer中设置的，并附在条件为this.state.hasResult

的容器上

如果我从该 View 中删除样式，边框显然会消失，但即使在 View 中放置静态文本也不会显示(检查以防我解析了 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>

我正在从父级导航到此页面，该父级使用类似的 ListView 样式并且它在那里完美显示。

Answer 1

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