reactjs - helmet - ¿Cómo volver a renderizar la lista plana?

react title

Question

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

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

Answer 1

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 cambiar esto funcionó de maravilla, espero que esto ayude a alguien.

Answer 2

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

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

Answer 3

He reemplazado FlatList con SectionList y se actualiza correctamente en el cambio de estado.

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

Lo único que debe tener en cuenta es que esa section tiene una estructura diff:

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

Answer 4

OK, acabo de descubrir que si queremos que FlatList conozca el cambio de datos fuera del accesorio de datos, debemos configurarlo en extraData, así que lo hago así ahora:

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

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

Answer 5

Oh, eso es fácil, solo usa extraData

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

Entonces, todo lo que tiene que hacer es asegurarse de dar algo que cambie a los datos extraData .

Esto es lo que hago:

Estoy usando immutable.js así que todo lo que hago es pasar un Mapa (objeto inmutable) que contiene todo 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 manera, cuando this.props.foo o this.props.bar cambien, nuestro CustomComponentRow se actualizará, porque el objeto inmutable será diferente al anterior.

Answer 6

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

Answer 7

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

1. establecer datos adicionales a 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
   })

Answer 8

Ponga variables que serán cambiadas por su interacción en extraData

Puedes ser creativo.

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

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

Answer 9

Si queremos que FlatList sepa que los datos cambian tanto el prop como el estado , podemos construir un objeto que haga referencia tanto al prop 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

Answer 10

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

Answer 11

Solo usa:

onRefresh={true}

dentro de su componente flatList .

Answer 12

Use la propiedad extraData en su componente FlatList.

Como dice la documentación:

Al pasar extraData={this.state} a FlatList nos aseguramos de que FlatList se vuelva a representar cuando cambie state.selected . Sin configurar este accesorio, FlatLis t no sabría que necesita volver a renderizar ningún elemento porque también es un PureComponent y la comparación del accesorio no mostrará ningún cambio.

Answer 13

extraData={this.state} 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>
);
}