Як повторно відтворити плоский список?

На відміну від ListView, ми можемо оновити this.state.datasource. Чи існує якийсь метод або приклад для оновлення FlatList або його повторного відтворення?

Моя мета - оновити текстове значення, коли користувач натискає кнопку ...

renderEntries({ item, index }) {
    return(
        <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})>
             <Text>{this.state.data[index].value}</Text>
        </TouchableHighlight>
    )
}

<FlatList 
    ref={(ref) => { this.list = ref; }} 
    keyExtractor={(item) => item.entry.entryId} 
    data={this.state.data} 
    renderItem={this.renderEntries.bind(this)} 
    horizontal={false} />

Використовуйте extraDataвластивість компонента FlatList.

Як зазначено в документації:

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

Для швидкого та простого рішення Спробуйте:

1. встановити додаткові дані на логічне значення.

   extraData = {this.state.refresh}

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

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

О, це просто, просто використовуй extraData

Ви бачите, як додаткові дані працюють за лаштунками, це FlatList або VirtualisedList просто перевіряє , чи змінився об'єкт звичайним 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оновимось, оскільки незмінний об'єкт буде іншим, ніж попередній.

Добре. Я щойно дізнався, що якщо ми хочемо, щоб FlatList знав, як змінюються дані за межами опису даних, нам потрібно встановити його в extraData, тому я роблю це так:

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

зверніться до: https://facebook.github.io/react-native/docs/flatlist#extradata

Якщо ви збираєтеся мати кнопку, ви можете оновити дані за допомогою setState всередині onPress. Потім SetState повторно відтворить ваш FlatList.

після багатьох пошуків та пошуку реальної відповіді нарешті я отримав відповідь, яка, на мою думку, є найкращою:

       <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} після того, як я змінився на це, він працював як шарм, сподіваюся, це комусь допоможе.

Я вирішив цю проблему, додавши, 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>
    );
  }

Просто продовження попередніх відповідей тут. Дві частини, щоб переконатися, що ви додали додаткові дані та що ваш keyExtractor унікальний. Якщо ваш keyExtractor постійний, рендерінг не буде ініційований.

<FlatList
data={this.state.AllArray}
extraData={this.state.refresh}
renderItem={({ item,index })=>this.renderPhoto(item,index)}
keyExtractor={item => item.id}
>
                                    </FlatList>

Я замінив FlatListна, SectionListі це належним чином оновлюється при зміні стану.

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

Єдине, що потрібно мати на увазі, це те, що sectionмає різну структуру:

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

Для мене фокусом стали 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 });
    }
  }
}

Помістіть змінні, які будуть змінені вашою взаємодією на extraData

Ви можете бути креативними.

Наприклад, якщо ви маєте справу зі змінним списком із позначками на них.

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

Якщо ми хочемо, щоб FlatList знав, як дані змінюються як prop, так і стан , ми можемо побудувати об’єкт, що посилається як на prop, так і на стан, і оновити список плоским.

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

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

У списку response-native-flat вони є властивістю, що називається extraData. додайте рядок нижче до вашого списку квартир.

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

У цьому прикладі, щоб змусити повторно відтворити, просто змініть змінну machine

const [selected, setSelected] = useState(machine)

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

Просто використовуйте:

onRefresh={true}

всередині вашого flatListкомпонента.

ExtraData Flatlist не працював для мене, і я випадково використовував проп від redux. Це звучало подібно до питань із коментарів у відповіді ED209. Я в кінцевому підсумку зателефонував setState, коли отримую підставку.

componentWillReceiveProps(nextProps: StateProps) {
    if (this.props.yourProp != null && nextProps.yourProp) {
        this.setState({ yourState: processProp(nextProps.yourProp) });
    }
}


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

Для тих, хто використовує> React 17, використовуйте getDerivedStateFromProps