Saltar al contenido

¿Puede forzar un componente React para que se vuelva a renderizar sin llamar a setState?

Revisamos completamente cada enunciado en nuestro sitio web con la meta de mostrarte en todo momento información veraz y actualizada.

Solución:

En su componente, puede llamar this.forceUpdate() para forzar un renderizado.

Documentación: https://facebook.github.io/react/docs/component-api.html

forceUpdate debe evitarse porque se desvía de la mentalidad de React. Los documentos de React citan un ejemplo de cuando forceUpdate podría usarse:

De forma predeterminada, cuando el estado o las propiedades de su componente cambien, su componente se volverá a renderizar. Sin embargo, si estos cambian implícitamente (por ejemplo, los datos en lo profundo de un objeto cambian sin cambiar el objeto en sí) o si su método render() depende de otros datos, puede decirle a React que necesita volver a ejecutar render() llamando forzarActualización().

Sin embargo, me gustaría proponer la idea de que incluso con objetos profundamente anidados, forceUpdate es innecesario Al usar una fuente de datos inmutable, el seguimiento de los cambios se vuelve económico; un cambio siempre dará como resultado un nuevo objeto, por lo que solo debemos verificar si la referencia al objeto ha cambiado. Puede usar la biblioteca Immutable JS para implementar objetos de datos inmutables en su aplicación.

Normalmente, debe intentar evitar todos los usos de forceUpdate() y solo leer desde this.props y this.state en render(). Esto hace que su componente sea “puro” y su aplicación sea mucho más simple y eficiente.forceUpdate()

Cambiando el key del elemento que desea volver a renderizar funcionará. Selecciona el key prop en su elemento a través del estado y luego, cuando desee actualizar el estado establecido para tener un nuevo key.

 

Luego se produce un cambio y restablece el key

this.setState( key: Math.random() );

Quiero señalar que esto reemplazará el elemento que el key está cambiando. Un ejemplo de dónde esto podría ser útil es cuando tiene un campo de entrada de archivo que le gustaría restablecer después de cargar una imagen.

Mientras que la true la respuesta a la pregunta del OP seria forceUpdate() He encontrado esta solución útil en diferentes situaciones. También quiero señalar que si te encuentras usando forceUpdate es posible que desee revisar su código y ver si hay otra forma de hacer las cosas.

NOTA 1-9-2019:

Lo anterior (cambiando el key) reemplazará completamente el elemento. Si te encuentras actualizando el key para realizar cambios, probablemente tenga un problema en algún otro lugar de su código. Utilizando Math.random() en key volverá a crear el elemento con cada renderizado. NO recomendaría actualizar el key así como react usa el key para determinar la mejor manera de volver a renderizar las cosas.

Realmente, forceUpdate() es la única solución correcta como setState() podría no activar una nueva representación si se implementa una lógica adicional en shouldComponentUpdate() o cuando simplemente regresa false.

forzarActualizar()

Vocación forceUpdate() causará render() para ser llamado en el componente, omitiendo shouldComponentUpdate(). más…

establecerEstado()

setState() siempre activará una nueva representación a menos que se implemente una lógica de representación condicional en shouldComponentUpdate(). más…


forceUpdate() puede ser llamado desde dentro de su componente por this.forceUpdate()


Hooks: ¿Cómo puedo forzar el componente para que se vuelva a renderizar con hooks en React?


Por cierto: ¿Estás mutando o tus propiedades anidadas no se propagan?

  • Cómo actualizar las propiedades de estado anidado en React
  • Salvadera

Reseñas y calificaciones

Si te animas, tienes la libertad de dejar una noticia acerca de qué te ha gustado de este tutorial.

¡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 *