在 api 请求后未调用渲染

我希望有人能帮助我，我已经在一个副项目上工作了一个多月，但我无法弄清楚这一点。这是代码：

getNews() {
    var news_items = new Array();
    AsyncStorage.setItem('time', JSON.stringify({'last_cache': moment()}));
    var url = "http://api.podio.com/"
    fetch(url)
    .then(response => response.text())
    .then((responseText) => {
      const doc = new DOMParser().parseFromString(responseText, "text/xml");
      var items = doc.getElementsByTagName('item');
      for (var i = 0; i < items.length; i++) {
        var appType = new Object();
        appType.title = items[i].childNodes[1].childNodes[0].data;
        appType.link = items[i].childNodes[3].childNodes[0].data;
        news_items.push(appType);
      }
      var ds = this.state.dataSource.cloneWithRows(news_items);
      console.log("ds: ", ds)
      AsyncStorage.setItem('news_items', JSON.stringify(news_items));
      this.setState({
        'news': ds,
        'loaded': true
      })
      console.log("news: ", this.state.news)
    })
    .catch((error) => {
      console.log('Error fetching the feed: ', error);
    });
  }
}
render() {
  console.log("rendering....")
  console.log("loaded? ", this.state.loaded)
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.header_item}>
          <Text style={styles.header_text}>{this.state.title}</Text>
        </View>
        <View style={styles.header_item}>
          {  !this.state.loaded &&
            <ActivityIndicator />
          }
        </View>
      </View>
      <View style={styles.body}>
        <ScrollView ref="scrollView">
          {
            this.state.loaded && <ListView dataSource={this.state.dataSource} renderRow={this.renderNews} ></ListView>
          }
        </ScrollView>
      </View>
    </View>
  );
}
componentWillMount() {
  this.getNews();
}
renderNews() {
  console.log("loading....")
  return (
    <TouchableHighlight onPress={this.viewPage(news.link)} underlayColor={"#E8E8E8"} style={styles.button}>
    <View style={styles.news_item}>
    <Text style={styles.news_item_text}>{news.title}</Text>
      </View>
    </TouchableHighlight>
  );
}

如您所见，我在代码中有很多控制台日志。这是它告诉我的：

rendering....
loaded?  false
ds:  ListViewDataSource {_dataBlob: Object, _dirtyRows: Array[1],   _dirtySections: Array[1], _cachedRowCount: 142, rowIdentities: Array[1]…}
rendering....
loaded?  true
news:  ListViewDataSource {_dataBlob: Object, _dirtyRows: Array[1], _dirtySections: Array[1], _cachedRowCount: 142, rowIdentities: Array[1]…}

这就是问题所在。在第一次渲染时，它显示"rendering...."，但加载为假，然后在此处设置 ds 变量：

var ds = this.state.dataSource.cloneWithRows(news_items(;console.log("DS： "， DS(

下次再次渲染时，它会显示"渲染...."现在加载是真的。但是，渲染中的此行永远不会被调用：

this.state.loaded && <ListView dataSource={this.state.dataSource} renderRow={this.renderNews} ></ListView>

此行从不调用"this.renderNews"并显示其数据。

此外，我没有看到控制台.log用于"加载..."

值得一提的是，this.renderNews 是在构造函数中设置的。换句话说：this.renderNews = this.renderNews.bind(this((edited(

挂

载后render失败，表示你调用setState错误，让调用如下：

  this.setState({
    'news': ds || [],
    'loaded': true
  })

不

  this.setState({
    'news': ds,
    'loaded': true
  })

这样，你可以避免this.state.news不为空，(假设news是一个数组。

不要在ListView上使用条件渲染。始终呈现它，但最初数据源为空。我的理解是第一次渲染构建组件树。然后，后续渲染实际上不会重建树，它们只是更新现有组件上的数据。可以在组件上设置visible道具，重新渲染将正确显示/隐藏它们。

相关内容

最新更新

热门标签：