Estoy trabajando en un proyecto de React/Redux y estoy intentando eliminar un indicador de progreso que se atasca en mi página de error. He confirmado que mi acción ClearAllSpinners funciona correctamente, pero creo que está borrando las ruletas prematuramente, antes de que aparezca la ruleta, ya que no funciona.
En mi componente de página de error, tengo el siguiente useEffect , desde el cual he estado tratando de enviar mi acción cada vez que la página se muestra o hay un cambio en isAnySpinnerActive:
useEffect(() => { dispatch(ClearAllSpinners()); }, [dispatch, isAnySpinnerActive]);Sé que la acción borra las ruletas según lo previsto, ya que la siguiente función establece una ruleta y luego la borra después de 5 segundos con éxito (esta función se usó únicamente como prueba):
const addSpinner = () => { dispatch(ShowSpinner('test-spinner')); setTimeout(() => { dispatch(ClearAllSpinners()); }, 5000); }; ¿Hay alguna otra forma en que pueda enviar mi acción en cualquier momento en que se represente la página de error y luego nuevamente después de que aparezcan los useEffect , además del gancho useEffect que estoy usando?
está utilizando el gancho useEffect que se activa para llamar después de que una variable o declaración haya cambiado o se haya activado de forma predeterminada como componnetDidMount . Puedes leer más sobre eso aquí .
estas variables o estados deben agregarse como su matriz de dependencias para que useEffect funcione correctamente según sus expectativas.
desea llamar a su acción de envío en su useEffect , está bien, pero ¿cuándo?
¡su fragmento le dice que ClearAllSpinners cuando su componente se montó!
puede hacer esto con su variable de estado (que controla la visibilidad de Spinner) de esta manera:
useEffect(() => { if(showSpinner) { // triggered when showSpinner is true setTimeout(() => { dispatch(ClearAllSpinners()); }, 5000) } else { // triggered when your component did mount or when showSpinner was false!! } }, [dispatch, showSpinner])