1

introducir la descripción de la imagen aquí

Esto funciona:

const addGoalHandler = () => {
    setCourseGoals(currentGoals => [...currentGoals, enteredGoal]);
  };

Pero de esta forma funciona diferente:

const addGoalHandler = () => {
    let arrGoals = courseGoals;
    arrGoals.push(enteredGoal);
    setCourseGoals(arrGoals);
  };

Se supone que los dos metodos añaden el contenido del input dentro de un arreglo, y luego este arreglo se debería renderizar como una lista. El primero lo hace, pero el segundo solo renderiza la lista cuando el valor del input cambia. Alguna idea de por que pasa eso?

1 respuesta 1

2

Esto pasa debido a que la función "setState" maneja acciones asincrónicas, a su vez React agrupa varias invocaciones setState() en una sola actualización para mejorar el rendimiento. Esto quiere decir que setState no muta inmediatamente el estado de tu componente. Esta información la puedes revisar en la documentación de "Estado y ciclo de vida" de un componente de React en el siguiente enlace Estado y ciclo de vida

Dentro de las mejores practicas para mutar tu estado te recomiendo seguir usando el operador spread o usar la función concat de los arreglos.

const addGoalHandler = () => {
    setCourseGoals(currentGoals => currentGoals.concat(enteredGoal));
};

Otro punto importante que me gustaria mencionarte es que si vas a tomar en cuenta el estado anterior para actualizar tu estado, siempre deberías usar el valor que te devuelve la función callback de setState.

2
  • haber empiezo a entender. en la primera forma lo que asigno es un arreglo nuevo, no muto absolutamente nada. mientras que en la segunda si muto la variable local con el metodo push. la variable arrGoals, toma el valor del estado courseGoals, agrega un texto nuevo, y lo asigna nuevamente al estado courseGoals. pero al momento de re-renderizar la lista de arreglos, no lista nada hasta que un nuevo evento re-renderiza el componente. que pasa con el metodo push? si en los dos casos asigno un arreglo nuevo.
    – Raphael
    Commented el 23 sept. 2020 a las 1:13
  • En tu primer función creas un nuevo arreglo a partir del estado anterior que te regresa el callback " setCourseGoals(currentGoals => [...currentGoals, enteredGoal])" aquí currentGoals lo obtienes a partir de la función callback a diferencia de tu otra función donde utilizas courseGoals que lo tomas de tu estado "Global" del componente. Commented el 23 sept. 2020 a las 15:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.