React Native ListView строка без повторной рендеринга после изменения состояния

React Native ListView: строки не перерисовываются после изменения состояния источника данных.

Вот упрощенная версия моего кода:

render(): {
  return <ListView
    dataSource={this.state.DS}
    renderRow={this.renderRow}/>
}

renderRow(item): {
  return <TouchableOpacity onPress={() => this.handlePress(item)}>
    {this.renderButton(item.prop1)} 
    </TouchableOpacity>
}

renderButton(prop1): {
  if (prop1 == true) {
    return <Text> Active </Text>
  } else {
    return <Text> Inactive </Text>
  }
}

handlePress(item): {
  **Change the prop1 of *item* in an array (clone of dataSource), then**
  this.setState({
    DS: this.state.DS.cloneWithRows(arrayFromAbove)
  })
}

Согласно примеру Facebook, ListView должен переименовывать каждый раз при изменении источника данных. Это потому, что я только изменяю свойство элемента в источнике данных? Кажется, что функция renderRow не является повторной рендерингом, а функция render() - из изменения источника данных.

Спасибо.

Ответ 1

Сначала вам нужно установить datasource в функции getInitialState. Затем измените источник данных, вызвав this.setState({}) и перейдя в новый источник данных. Похоже, что вы, возможно, были на правильном пути выше, но я создал рабочий пример смены ListView datasource здесь. Надеюсь, это поможет

https://rnplay.org/apps/r3bzOQ

Ответ 2

реакция достаточно умна, чтобы обнаруживать изменения в источнике данных и если список должен быть повторно отображен. Если вы хотите обновить listView, создайте новые объекты вместо обновления свойств существующих объектов. Код будет выглядеть примерно так:

let newArray = this._rows.slice();
newArray[rowID] = {
  ...this._rows[rowID],
  newPropState: true,
};
this._rows = newArray;

let newDataSource = this.ds.cloneWithRows(newArray);
this.setState({
  dataSource: newDataSource
});

Вы можете узнать больше о подобной проблеме в Github