Düz liste nasıl yeniden oluşturulur?

ListView'den farklı olarak this.state.datasource'u güncelleyebiliriz. FlatList'i güncellemek veya yeniden oluşturmak için herhangi bir yöntem veya örnek var mı?

Amacım, kullanıcı düğmeye bastığında metin değerini güncellemek ...

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} />

extraDataFlatList bileşeninizdeki özelliği kullanın .

Belgelerin belirttiği gibi:

Geçerek extraData={this.state}için FlatListbiz emin FlatListzaman kendini yeniden verecek state.selecteddeğişir. Bu pervaneyi ayarlamadan, FlatListherhangi bir öğeyi yeniden oluşturması gerektiğini bilemezsiniz çünkü bu aynı zamanda bir PureComponentve prop karşılaştırması herhangi bir değişiklik göstermez.

Hızlı ve basit çözüm için Deneyin:

1. ekstra veriyi bir boole değerine ayarlayın.

   extraData = {this.state.refresh}

2. Listeyi yeniden oluşturmak / yenilemek istediğinizde boole durumunun değerini değiştirin

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

Oh bu kolay, sadece kullan extraData

Ekstra verilerin perde arkasında nasıl çalıştığını görüyorsunuz , FlatList veya VirtualisedList , nesnenin normal bir onComponentWillReceivePropsyöntemle değişip değişmediğini kontrol ediyor .

Yani tek yapmanız gereken, 'a değişen bir şey verdiğinizden emin olmaktır extraData.

İşte yaptığım şey:

İmmutable.js kullanıyorum, bu yüzden tek yaptığım, izlemek istediğim şeyi içeren bir Harita (değişmez nesne) iletmek.

<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}
        />
    ))}
/>

Bu şekilde, ne zaman this.props.fooveya this.props.bardeğiştiğinde CustomComponentRowgüncelleniriz, çünkü değişmez nesne öncekinden farklı olacaktır.

Tamam, şimdi öğrendim ki, FlatList'in veri propunun dışındaki veri değişimini bilmesini istiyorsak, onu extraData olarak ayarlamamız gerekiyor, bu yüzden bunu şimdi yapıyorum:

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

bakın: https://facebook.github.io/react-native/docs/flatlist#extradata

Bir Düğmeye sahip olacaksanız, verileri onPress içindeki bir setState ile güncelleyebilirsiniz. SetState daha sonra FlatList'inizi yeniden işleyecektir.

Pek çok arama yaptıktan ve gerçek cevabı aradıktan sonra sonunda cevabı aldım ki bunun en iyisi olduğunu düşünüyorum:

       <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 }**
              />
    .....

ana problemim (KeyExtractor) bunu böyle kullanmıyordum. çalışmıyor: keyExtractor = {(item) => item.ID} bunu değiştirdikten sonra cazibe gibi çalıştı umarım bu birine yardımcı olur.

Buradaki önceki cevapların bir uzantısı. Emin olmak için iki bölüm, extraData eklediğinizden ve keyExtractor'ınızın benzersiz olduğundan emin olun. KeyExtractor'ınız sabitse, yeniden oluşturucu tetiklenmeyecektir.

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

Bu sorunu ekleyerek extraData={this.state}çözdüm Daha fazla ayrıntı için lütfen aşağıdaki kodu kontrol edin

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

Ben yerini almıştır FlatListile SectionListve devlet değişikliği düzgün güncellemeleri.

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

Akılda tutulması gereken tek şey section, diff yapısına sahip olmasıdır:

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

Benim için işin püf noktası extraData ve öğe bileşenini bir kez daha incelemek oldu

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 });
    }
  }
}

Etkileşiminizle değiştirilecek değişkenleri şuraya koyun: extraData

Yaratıcı olabilirsiniz.

Örneğin, üzerlerinde onay kutuları bulunan değişen bir listeyle uğraşıyorsanız.

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

FlatList'in verilerin hem pervane hem de durum değişikliğini bilmesini istiyorsak, hem prop hem de duruma referans veren bir nesne oluşturabilir ve düz listeyi yenileyebiliriz.

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

Dokümanlar: https://facebook.github.io/react-native/docs/flatlist#extradata

React-native-flatlist'te, extraData olarak adlandırılan bir özelliktir. Aşağıdaki satırı düz listenize ekleyin.

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

Bu örnekte, yeniden oluşturmayı zorlamak için değişkeni değiştirin machine

const [selected, setSelected] = useState(machine)

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

Sadece kullan:

onRefresh={true}

flatListbileşeninizin içinde .

Flatlist'in extraData benim için çalışmıyordu ve redux'ten bir destek kullanıyordum. Bu, ED209'un cevabındaki yorumlardan gelen sorunlara benziyordu. Pervaneyi aldığımda setState'i manuel olarak çağırdım.

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 kullananlar için getDerivedStateFromProps kullanın