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