Блог

Главная - Вопросы по программированию - Переключатель React-Native в ListItem всегда не отмечен

Переключатель React-Native в ListItem всегда не отмечен

#javascript #react-native #react-native-elements

#javascript #react-native #react-native-элементы

Вопрос:

У меня есть список объектов, которые я хочу показать в виде плоского списка. Элементы списка также должны иметь переключатель для выбора или отмены выбора записи. Но каждый раз, когда я нажимаю на переключатель, состояние остается непроверенным. Я не знаю, является ли это ошибкой компонента ListItem или в моем коде. Событие onValueChange запускается правильно, но затем кажется, что плоский список не отображается повторно после изменения состояния или набор данных не обновляется…

Вот мои классы:

 class Person {
  constructor() {
    this._name = '';
    this._selected = false;
  }

  getName() {
    return this._name;
  }

  setName(value) {
    this._name = value;
  }

  isSelected() {
    return this._selected;
  }

  setSelected(value) {
    this._selected = value;
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    let p1 = new Person();
    p1.setName('Superman');
    let p2 = new Person();
    p2.setName('Batman');
    let list = [ p1, p2 ];
    this.state = { persons: list };
  }

  renderItem = ({item, index}) => (
    <ListItem
      title={item.getName()}
      switch={{
        value: item.isSelected(),
        onValueChange: (value) => {
          let list = this.state.persons;
          list[index].setSelected(value);
          this.setState({ persons: list });
        },
      }}
    />
  );

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.persons}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
}

Комментарии:

1. Попробуйте разные имена переменных. И для обновления данных они должны обновляться. Создайте обновленную структуру. <FlatList style={styles.listContainer} onRefresh={this.refreshData} renderItem={this.renderItem} refreshing={this.state.refreshing} data={this.state.data} />

Ответ №1:

Ваш код работает нормально, отсутствует только extraData свойство компонента FlatList.

Проверьте документацию:

Переходя extraData={this.state} к FlatList, мы убеждаемся, что сам FlatList будет повторно отображаться при state.selected изменениях. Без установки этого параметра FlatList не будет знать, что ему нужно повторно отображать какие-либо элементы, потому что он также является PureComponent, и сравнение параметров не покажет никаких изменений.

В вашем случае это должно быть:

 <FlatList
     data={this.state.persons}
     renderItem={this.renderItem}
     extraData={this.state}
/>

Вот рабочая демонстрация.

Метки: