Как заставить ReactNative ListView обновлять строку при изменении данных строки?

Question

ListView ReactNative немного странно, когда дело доходит до обновления данных.

У меня есть массив объектов (имя: элемент), которые имеют 3 свойства:

• id (int)
• имя (строка)
• включено (bool)

Массив элементов отображается в ListView. В каждой строке отображается название элемента и галочка, представляющая состояние включенного (красный на true, серый на false). В моем примере это упрощенная строка "true"/"false".

Каждая строка встраивается в TouchableOpacity с помощью onPress-EventHandler, который переключает состояние включенного состояния представляемого элемента.

К сожалению, ListView не будет обновлять строку.

При отладке rowHasChanged-Event выясняется, что rowHasChanged-Event никогда не сможет определить измененное состояние, поскольку обе строки уже получают новое состояние после переключения свойства enabled без какого-либо обновления пользовательского интерфейса.

Вот мой код:

Класс предмета: Item.js

export default class Item {

  constructor(id, name, enabled) {
    this._id = id;
    this._name = name;
    this._enabled = enabled;
  }

  get id() {return this._id}

  get name() {return this._name}
  set name(value) {this._name = value}

  get enabled() {return this._enabled}
  set enabled(value) {this._enabled = value}

}

ListView:

'use strict';

import React, {PropTypes, Component} from 'react';

import {View,TouchableOpacity, TouchableHighlight,
  Text, ListView, StyleSheet} from 'react-native';

import Item from './Item';

class ItemListView extends Component {

  constructor(props) {
    super(props);

    this.updateListView = this.updateListView.bind(this);
    this.toggleItemEnabled = this.toggleItemEnabled.bind(this);

    this.state = {
      dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 != row2
            }),
    };
  }

  componentDidMount() {
    this.updateListView(this.props.items)
  }

  componentWillReceiveProps(nextProps) {
    this.updateListView(nextProps.items)
    }

  updateListView(items) {
    this.setState({
            dataSource: this.state.dataSource.cloneWithRows(
                items.slice() // copy items to a new array
            ),
        });
  }

  toggleItemEnabled(item) {
    item.enabled = !item.enabled;

    this.updateListView(this.props.items);
  }

  renderItem(item) {
    console.log('Render', item.enabled, item.name)
    return (
      <TouchableOpacity style={{flex:1}} onPress={ () => this.toggleItemEnabled(item) }>
        <View style={s.row}>
              <Text>{item.name + ' ' + item.enabled}</Text>
          </View>
      </TouchableOpacity>
    )
  }

  render() {
    return (
      <View style={s.container}>
        <ListView
          style={s.listView}
          dataSource={this.state.dataSource}
          renderRow={(item) => this.renderItem(item)}
        />
      </View>
    )
  }

}

ItemListView.propTypes = {
  items: PropTypes.array
};

ItemListView.defaultProps = {
  items: [],
};

export default ItemListView;


const s = StyleSheet.create({
  container: {
  },

  row: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 12,
    paddingBottom: 12,
    paddingHorizontal: 30,
    borderBottomWidth: 1,
    borderBottomColor: 'gray',
  },

  innerContainer: {
    alignItems: 'center',
  },

});

Как исправить это поведение, которое ListView обновляется при изменении данных строки?

Answer 1

Я думаю, что проблема заключается в ListView источник данных не обновляется при обновлении item, item перешел к toggleItemEnabled принадлежит state.datasource в то время как вы устанавливаете источник данных для props.items

Решение 1

Клонировать строки и установить строки снова

toggleItemEnabled(item, sectionId, rowId) {
    newItems = this.props.items.slice();
    newItems[rowId].enabled = !newItems[rowId].enabled;

    this.updateListView(newItems);
}

Решение 2

Это способ, которым я бы предпочел. Я вообще создаю отдельный компонент для RowТаким образом, вы должны рефакторинг следующим образом

Создать новый Row.js

constructor(props) {
    super(props);

    this.state = {
       enabled: false;
    };
 }


toggleItemEnabled() {
    this.setState({enabled: !this.state.enabled});

}

render() {
 item = this.props.data;
 return (
      <TouchableOpacity style={{flex:1}} onPress={ () => this.toggleItemEnabled() }>
        <View style={s.row}>
              <Text>{item.name + ' ' + this.state.enabled}</Text>
          </View>
      </TouchableOpacity>
    )

}

Затем в вашем основном компоненте в методе рендеринга строки вызовите этот компонент Row

renderItem(item) {
     return(
         <Row data={item} />
     );
 }

Answer 2

Может быть что-то с неизменяемостью, попробуйте изменить значение таким образом

toggleItemEnabled(item) {
    this.updateListView(this.props.items.map(
            (i) => 
                return (i.id() == item.id()) ? new Item(i.id(), i.name(), !i.enabled()) : i
        )
    );
}

с этим "ломтиком" не будет необходимости

Answer 3

      toggleItem(item) {
 item.isSelected = !item.isSelected;
 const items = [...this.state.dataSource];
 const index = items.findIndex((x) => x.id === item.id);
 items[index] = item;
 this.setState({ dataSource: items });

}