¿Cómo volver a renderizar la lista plana?

A diferencia de ListView, podemos actualizar this.state.datasource. ¿Existe algún método o ejemplo para actualizar FlatList o volver a renderizarlo?

Mi objetivo es actualizar el valor del texto cuando el usuario presiona el botón ...

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

Utilizar el extraData propiedad en su componente FlatList.

Como dice la documentación:

Al pasar extraData={this.state}a FlatListnos aseguramos de que FlatListse volverá a renderizar cuando los state.selectedcambios. Sin establecer este accesorio, FlatListno sabría que necesita volver a renderizar ningún elemento porque también es un PureComponenty la comparación de accesorios no mostrará ningún cambio.

Para una solución rápida y sencilla Pruebe:

1. establecer datos adicionales en un valor booleano.

   extraData = {this.state.refresh}

2. Cambie el valor del estado booleano cuando desee volver a renderizar / actualizar la lista

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

Oh, eso es fácil, solo usa extraData

Verá que la forma en que funcionan los datos adicionales detrás de escena es FlatList o VirtualisedList simplemente verifica si ese objeto ha cambiado a través de unonComponentWillReceiveProps método .

Así que todo lo que tienes que hacer es asegurarte de dar algo que cambie al extraData .

Esto es lo que hago:

Estoy usando immutable.js, así que todo lo que hago es pasar un mapa (objeto inmutable) que contiene lo que quiero ver.

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

De esa forma, cuando this.props.fooo this.props.barcambie, nuestro CustomComponentRowse actualizará, porque el objeto inmutable será diferente al anterior.

OK, acabo de descubrir que si queremos que FlatList sepa el cambio de datos fuera del soporte de datos, necesitamos configurarlo en extraData, así que lo hago así ahora:

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

consulte: https://facebook.github.io/react-native/docs/flatlist#extradata

Si va a tener un Button, puede actualizar los datos con un setState dentro de onPress. SetState luego volverá a renderizar su FlatList.

Después de mucho buscar y buscar una respuesta real, finalmente obtuve la respuesta que creo que es la mejor:

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

mi principal problema era (KeyExtractor) no lo estaba usando así. no funciona: keyExtractor = {(item) => item.ID} después de que cambié a esto funcionó como un encanto, espero que esto ayude a alguien.

Resolví este problema agregando extraData={this.state}Verifique el código a continuación para obtener más detalles

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

Solo una extensión de las respuestas anteriores aquí. Dos partes para asegurarse, asegúrese de agregar extraData y que su keyExtractor sea único. Si su keyExtractor es constante, no se activará una repetición.

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

He substituido FlatListcon SectionListy está actualizaciones correctamente en cambio de estado.

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

Lo único que hay que tener en cuenta es que sectiontienen estructura de diferencias:

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

Para mí, el truco fue extraData y profundizar en el componente del elemento una vez más

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

Coloque las variables que cambiará su interacción en extraData

Puedes ser creativo.

Por ejemplo, si se trata de una lista cambiante con casillas de verificación.

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

Si queremos que FlatList sepa que los datos cambian tanto en la propiedad como en el estado , podemos construir un objeto que haga referencia tanto a la propiedad como al estado y actualizar la lista plana.

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

Documentos: https://facebook.github.io/react-native/docs/flatlist#extradata

En react-native-flatlist, son una propiedad llamada extraData. agregue la siguiente línea a su lista plana.

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

En este ejemplo, para forzar una repetición, simplemente cambie la variable machine

const [selected, setSelected] = useState(machine)

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

Solo usa:

onRefresh={true}

dentro de su flatListcomponente.

El extraData de Flatlist no funcionaba para mí y estaba usando un accesorio de redux. Esto sonó similar a los problemas de los comentarios en la respuesta de ED209. Terminé llamando manualmente a setState cuando recibí el prop.

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

Para aquellos de ustedes que usan> React 17, use getDerivedStateFromProps