javascript - qué - ¿Cómo actualizo el estado(usando ReactJS) si no debo llamar a setState en componentWillUpdate?

react lifecycle diagram

Question

Cuando setState en componentWillUpdate , componentWillUpdate ejecuta en un bucle infinito que no deja de activarse.

Esto nunca le da a mi render oportunidad de reflejar mis cambios. ¿Cómo puedo cambiar el estado si no debo usar componentWillUpdate ?

Edición: Ya tengo algo de entendimiento de que no se debería setState en componentWillUpdate. Simplemente estoy confundido sobre lo que debería hacer como alternativa.

Edición nº 2: comencé con componentWillReceiveProps pero parece que no puedo activar esta función cuando mi componente principal cambia de estado. Proporciono ese estado del padre como apoyo a mi hijo.

Answer 1

Entiendo que esto está advertido en la link pero no estoy seguro de poder ver el problema al llamar a setState desde componentWillUpdate . Es cierto que puede dar lugar a una recursión infinita a menos que, por supuesto, proporcione un fondo a esa recursión (una forma de salir de ella). Por ejemplo, una forma podría ser verificar el segundo parámetro ( nextState ) en componentWillUpdate y no invocar setState nuevamente si se cumple alguna condición (que es cuando finaliza la recursión).

Como ejemplo mínimo, imagine un componente que no tiene propiedades, solo dos partes del estado. Además, imagine que la segunda parte del estado se obtiene de forma asíncrona desde la primera. Por ejemplo, la primera parte del estado podría ser algún parámetro para proporcionar a una llamada Ajax, y la segunda parte del estado es el resultado de esa llamada. Básicamente, usted llama a this.setState para configurar los parámetros y luego dentro de componentWillUpdate puede hacer algo como lo siguiente (para simplificar las cosas, uso un window.setTimeout como un marcador de posición para una llamada Ajax):

const ComponentWithAsyncState = React.createClass({
    getInitialState: function() {
        return {
            ajaxParams: '''',
            ajaxResult: ''''
        };
    },
    setAjaxParams: function(params) {
        this.setState({ajaxParams: params});
    },
    componentWillUpdate: function(_, nextState) {
        if (nextState.ajaxParams!=this.state.ajaxParams)
            window.setTimeout(function imagineThisIsAjax() {
                this.setState({ajaxResult: `result from ${nextState.ajaxParams}`});
            }.bind(this), 2000);
    },

Cuando, (p. Ej., A través de algunos controles gestionados por este componente) los cambios ajaxParams , la secuencia de acciones será algo como (donde ~~> denota asincronicidad):

setAjaxParams --> this.setState --> componentWillUpdate ~~> imagineThisIsAjax --> this.setState --> componentWillUpdate

Es decir, la segunda llamada a componentWillUpdate no resultará en un nuevo this.setState y, por lo tanto, la recursión terminará allí.

Answer 2

Lo primero que debe hacer es verificar la documentación oficial de este método ( link ). Donde se puede leer cuando la función es realmente llamada.

Luego lee el error común (nota):

No puede usar this.setState () en este método. Si necesita actualizar el estado en respuesta a un cambio de prop., Use componentWillReceiveProps en su lugar.

Cambia el estado y React llama automáticamente a componentWillUpdate .