Intento obtener datos de artículos. si la respuesta de la solicitud es inferior a 1, tengo que volver a solicitarla. entonces escribo una función recursiva con setTimeout. pero cuando trato de cambiar mi función de ruta sigue funcionando. window.clearTimeout() o global.clearTimeOut() no funcionaron aquí cuando se desmonta el componente. ¿Echo de menos algo?
useEffect(() => { getItems(params); return () => { window.clearTimeout(); global.clearTimeout(); } }, []); const getItems = async(params) => { try { const { data = []} = await axios.get('/some-endpoint',params); dispatch({ type: ITEMS_START }); if (data.length === 0) { setTimeout(() => { getItems(params); }, 5000); } else { dispatch({ type: ITEMS_SUCCESS, payload: { data } }); } } catch (error) { dispatch({ type: ITEMS_ERROR, payload: error }); } }Use una referencia para almacenar la timeout ID de espera y luego borre ese tiempo de espera.
const timeoutRef = React.useRef(); useEffect(() => { getItems(params); return () => { window.clearTimeout(timeoutRef.current); } }, []); const getItems = async(params) => { try { const { data = []} = await axios.get('/some-endpoint',params); dispatch({ type: ITEMS_START }); if (data.length === 0) { timeoutRef.current = setTimeout(() => { getItems(params); }, 5000); } else { dispatch({ type: ITEMS_SUCCESS, payload: { data } }); } } catch (error) { dispatch({ type: ITEMS_ERROR, payload: error }); } }Cree una referencia a la que también pueda configurar su tiempo de espera para que el desmontaje pueda volver a llamar.
let timeout = null; useEffect(() => { getItems(); return () => { if(timeout) clearTimeOut(timeout) } }) const getItems = () => { timeout = setTimeOut(() => work, 5000); }Esta es la idea general.
Cada SetTimeout (y setInterval) devuelve un número que se puede usar para borrarlo. es decir, var x = setTimeout(() => console.log('timeout'),1000); clearTimeout(x); no hará nada