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

Question

我有一个像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时,更改就在那里.我需要以某种方式重新渲染行吗？它们不应该自动改变吗？

谢谢!

Answer 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)
}

希望能帮助到你!

Answer 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),
});

参考:

• React-Native更新列表视图数据源
• 当数据源数组中的对象的属性发生更改时,ListView不会重新呈现行#4104