Question

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

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 ....”，但加载为false，然后在此处设置ds变量：

var ds = this.state.dataSource.cloneWithRows（news_items）; console.log（“ds：”，ds）

下次再渲染时会显示“render ....”，现在加载为true。但是，渲染中的这一行永远不会被调用：

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

此行永远不会调用“this.renderNews”并显示其“数据”。

此外，我没有看到“loading ....”的console.log

有一点要提到的是this.renderNews是在构造函数中设置的。换句话说：this.renderNews = this.renderNews.bind（this）（已编辑）

Answer 1

安装后

render失败，表示您错误地呼叫setState，请拨打以下电话：

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

不

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

由此，您可以避免this.state.news为空（假设news是一个数组。

Answer 2

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

顺便说一下，你不需要ScrollView。 ListView已有滚动条。嵌套滚动视图在移动设备上很糟糕。

api请求后调用未被调用

2 个答案: