Saltar al contenido

FlatList nativo de React no vuelve a renderizar la fila cuando cambian los accesorios

Te damos la bienvenida a nuestra web, ahora encontrarás la resolución de lo que estás buscando.

Solución:

El problema aquí radica en el hecho de que

  1. Está mutando una porción de estado existente en lugar de crear una copia mutada

_onCategoryChosen = category => 
    var oldReportCopy = this.state.report; // This does not create a copy!
    oldReportCopy.selectedCategory = category;
    this.setState(Object.assign(, this.state,  report: oldReportCopy ));
;

Esto debería ser

_onCategoryChosen = category => 
    var oldReportCopy = Object.assign(, this.state.report);
    oldReportCopy.selectedCategory = category;
    // setState handles partial updates just fine, no need to create a copy
    this.setState( report: oldReportCopy );
;

  1. Los accesorios de FlatList siguen siendo los mismos, su _renderRow función puede depender de la selectedCategory prop que cambia (si no es por el primer error), pero el componente FlatList no lo sabe. Para resolver esto, utilice el extraData apuntalar.

     item.node.id
      extraData=this.props.selectedCategory
    />
    

Simplemente puedes resolver este problema pasando accesorios para datos extra en lista plana componente como este,

  

Estoy de acuerdo con Nimelrian. Además, si su estado es una matriz, puede crear un objeto de matriz a partir del estado haciendo:

 var oldReportCopy = Object.assign([], this.state.report);

Luego use el método .push() para agregarle su nuevo objeto de esta manera:

oldReportCopy.push(selectedCategory);

a continuación, puede volver a establecer este nuevo objeto de matriz en el estado:

this.setState( report: oldReportCopy );

Tienes la opción de ayudar nuestro análisis dejando un comentario o valorándolo te damos las gracias.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *