更新状态不更新视图

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

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

我提到articleContainer设置在样式表，并附有与该状态的容器边框this.state.hasResult

如果我从该视图边界dissappears明显，但删除样式即使在视图内部放置一个静态文本也没有被显示（在我解析了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>

我浏览这个网页从使用类似的样式列表视图父母，它在那里完美展现。

来源

2017-02-05 Shaurya Chaudhuri

这个问题似乎是我使用flex属性的样式，而不使用ScrollView或ListView。我会进一步研究并更新答案。

来源

2017-02-05 15:16:31

更新状态不更新视图

回答

相关问题