Обновление this.state.dataSource не обновляет ListView

У меня есть 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 с количеством "голосов" в фильме. Но эти изменения не отражены в пользовательском интерфейсе, но когда я регистрирую файл this.state.dataSource, изменения там. Нужно ли мне как-то перерисовывать строки? Не должны ли они автоматически меняться?

Спасибо!

Ответы

Ответ 1

Чтобы сделать 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),
});

Ссылка:

Ответ 2

У меня подобная ситуация, и мне нужно было только:

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

Надеюсь, что это поможет!

Ответ 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();
}