更新 this.state.dataSource 不会更新 ListView答案

【问题标题】：Updating this.state.dataSource doesn't update ListView更新 this.state.dataSource 不会更新 ListView
【发布时间】：2015-07-08 03:18:12
【问题描述】：

我有一个类似的 ListView：

<ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderMovie}
      style={styles.listView}
/>

它显示如下行：

  <View style={styles.container}>
      <TouchableHighlight onPress={this._onPressButton.bind(this,movie)}>

        <Image
          source={{uri: movie.uri}}
          style={styles.thumbnail}
        />
    </TouchableHighlight>
    <View style={styles.rightContainer}>
      <Text style={styles.title}>{movie.id}</Text>
      <Text style={styles.year}>{movie.votes}</Text>
    </View>
  </View>

我有一个函数可以用电影的“票数”来更新 this.state.dataSource。但是这些更改并未反映在 UI 中，但是当我记录 this.state.dataSource 时，更改就在那里。我是否需要以某种方式重新渲染行？它们不应该自动改变吗？

谢谢！

【问题讨论】：

标签： react-native

【解决方案1】：

我也有类似的情况，我唯一要做的就是：

this.setState({
  dataSource: this.ds.cloneWithRows(new_data_for_datasource)
})

它对我来说很好用。在类构造函数中，我有以下代码：

this.ds = new ListView.DataSource({
  rowHasChanged: (row1, row2) => row1 !== row2
})
this.state = {
  dataSource: this.ds.cloneWithRows(this.props.original_data)
}

希望对你有帮助！

【讨论】：

我看到的问题是您有一个“new_data_for_datasource”，但我的新数据源将是当前数据源。如，我更改 this.state.dataSource。所以我不能做 dataSource:this.ds.cloneWithRows(this.state.dataSource) 对吗？如，我没有新的 dataSource 对象。我想我可以设置一个作为当前状态数据源的副本？
我不明白您如何在没有更新数据源的情况下重新加载 ListView。你能告诉我你创建初始数据源的代码吗？在这个数据源中，您必须使用 cloneWithRows 传递一些数据，或者数据源来自前一个组件，由 props 传递？
fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.gifs), loaded: true, }); }) .done(); },
^这就是我最初获取数据的方式

【解决方案2】：

要使 React-native 重新渲染行，您需要创建数组的副本，更新您的对象，然后将 setState 与新创建的数组一起使用。例如：

let newArray = this.state.dataSource.slice();
newArray[indexToUpdate] = {
  ...this.state.dataSource[indexToUpdate],
  field: newValue,
};
this.setState({
  dataSource: this.state.dataSource.cloneWithRows(newArray),
});

参考：

【讨论】：

【解决方案3】：

我正在调用一个函数来获取新数据并使用克隆选项更新列表视图，如下所示：

fetchCarData(datax) {
    fetch(REQUEST_URL + '&' + 'place=' + datax)
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData),
                loaded: true,
            });
            if (responseData.notfound === 'yes') {
                alert('No Vehicles found');
                this.setState({
                    notfound: 'Not found vehicles, do another search'
                })
            } else {
                this.setState({
                    notfound: ''
                })
            }
        })
        .done();
}

【讨论】：