Как повторно отобразить список?

Ответ 1

Используйте extraData свойство на компоненте FlatList.

Как указано в документации:

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

Ответ 2

Для быстрого и простого решения попробуйте:

1. установить дополнительные данные в логическое значение.

   ExtraData = {this.state.refresh}

2. Переключите значение логического состояния, когда вы хотите перерисовать/обновить список

   this.setState({ 
       refresh: !this.state.refresh
   })
   

Ответ 3

О, это просто, просто используйте extraData

Вы видите, что дополнительные данные работают за кулисами: FlatList или VirtualizedList просто проверяет если этот объект изменился с помощью обычного метода onComponentWillReceiveProps.

Итак, все, что вам нужно сделать, это убедиться, что вы передаете что-то, что меняется на extraData.

Вот что я делаю:

Я использую immutable.js, поэтому все, что я делаю, это передать карту (неизменяемый объект), содержащий все, что я хочу посмотреть.

<FlatList
    data={this.state.calendarMonths}
    extraData={Map({
        foo: this.props.foo,
        bar: this.props.bar
    })}
    renderItem={({ item })=>((
        <CustomComponentRow
            item={item}
            foo={this.props.foo}
            bar={this.props.bar}
        />
    ))}
/>

Таким образом, при изменении this.props.foo или this.props.bar наш CustomComponentRow будет обновляться, поскольку неизменяемый объект будет отличаться от предыдущего.

Ответ 4

Хорошо. Я только что узнал, что если мы хотим, чтобы FlatList знал об изменении данных вне базы данных, нам нужно установить его на extraData, поэтому я делаю это сейчас так:

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

относится к: https://facebook.github.io/react-native/docs/flatlist#extradata

Ответ 5

Если у вас будет кнопка, вы можете обновить данные с помощью setState внутри onPress. Затем SetState повторно отобразит ваш FlatList.

Ответ 6

Я решил эту проблему, добавив extraData={this.state} Пожалуйста, проверьте код ниже для более подробной информации

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

Ответ 7

после долгих поисков и поисков реального ответа, наконец, я получил ответ, который я считаю лучшим:

       <FlatList
      data={this.state.data}
      renderItem={this.renderItem}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      ItemSeparatorComponent={this.renderSeparator}
      refreshing={this.state.refreshing}
      onRefresh={this.handleRefresh}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={1}
      extraData={this.state.data}
      removeClippedSubviews={true}
      **keyExtractor={ (item, index) => index }**
              />
    .....

моя главная проблема была (KeyExtractor), я не использовал его, как это. не работает: keyExtractor = {(item) => item.ID} после того, как я перешел на это, он работал как шарм, надеюсь, это кому-нибудь поможет.

Ответ 8

Я заменил FlatList на SectionList и он корректно обновляется при изменении состояния.

<SectionList
  keyExtractor={(item) => item.entry.entryId} 
  sections={section}
  renderItem={this.renderEntries.bind(this)}
  renderSectionHeader={() => null}
/>

Единственное, что нужно иметь в виду, это то, что section имеет структуру diff:

const section = [{
  id: 0,
  data: this.state.data,
}]

Ответ 9

Для меня трюк был extraData и сверление в компонент компонента еще раз

state = {
  uniqueValue: 0
}

<FlatList
  keyExtractor={(item, index) => item + index}
  data={this.props.photos}
  renderItem={this.renderItem}
  ItemSeparatorComponent={this.renderSeparator}
/>

renderItem = (item) => {
  if(item.item.selected) {
    return ( <Button onPress={this.itemPressed.bind(this, item)}>Selected</Button> );
  }
  return ( <Button onPress={this.itemPressed.bind(this, item)}>Not selected</Button>);
}

itemPressed (item) {
  this.props.photos.map((img, i) => {
    if(i === item.index) {
      if(img['selected') {
        delete img.selected;
      } else {
        img['selected'] = true;
      }
      this.setState({ uniqueValue: this.state.uniqueValue +1 });
    }
  }
}

Ответ 10

Поместите переменные, которые будут изменены вашим взаимодействием в extraData

Вы можете быть творческими.

Например, если вы имеете дело с меняющимся списком с флажками на них.

<FlatList
      data={this.state.data.items}
      extraData={this.state.data.items.length * (this.state.data.done.length + 1) }
      renderItem={({item}) => <View>  

Ответ 11

Если мы хотим, чтобы FlatList знал, что данные изменяют как prop, так и state, мы можем создать объект, ссылающийся как на prop, так и на state, и обновить flatlist.

const hasPropOrStateChange = { propKeyToWatch: this.props, ...this.state};
<FlatList data={...} extraData={this.hasPropOrStateChange} .../>

Документы: https://facebook.github.io/react-native/docs/flatlist#extradata

Ответ 12

Просто используйте:

onRefresh={true}

внутри вашего компонента flatList.

Ответ 13

В Reaction-native-flatlist это свойство называется extraData. добавьте нижнюю строку в ваш плоский список.

 <FlatList
          data={data }
          style={FlatListstyles}
          extraData={this.state}
          renderItem={this._renderItem}
       />

Ответ 14

В этом примере для принудительного повторного рендеринга просто измените переменную machine

const [selected, setSelected] = useState(machine)

useEffect(() => {
    setSelected(machine)
}, [machine])