export default () => { const [isSending, setIsSending] = useState(false) const sendRequest = useCallback(async () => { // don't send again while we are sending if (isSending) return // update state setIsSending(true) // send the actual request await API.sendRequest() // once the request is sent, update state again setIsSending(false) }, [isSending]) // update the callback if the state changes return ( <input type="button" disabled={isSending} onClick={sendRequest} /> ) }

esto es a lo que se reduciría cuando desea enviar una solicitud al hacer clic y deshabilitar el botón mientras se envía

actualizar:

@tkd_aj señaló que esto podría dar una advertencia: "No se puede realizar una actualización de estado de React en un componente desmontado. Esto no funciona, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y asíncronas tareas en una función de limpieza useEffect".

Efectivamente, lo que sucede es que la solicitud aún se está procesando, mientras que su componente se desmonta. Luego intenta setIsSending (un estado establecido) en un componente desmontado.

 export default () => { const [isSending, setIsSending] = useState(false) const isMounted = useRef(true) // set isMounted to false when we unmount the component useEffect(() => { return () => { isMounted.current = false } }, []) const sendRequest = useCallback(async () => { // don't send again while we are sending if (isSending) return // update state setIsSending(true) // send the actual request await API.sendRequest() // once the request is sent, update state again if (isMounted.current) // only update if we are still mounted setIsSending(false) }, [isSending]) // update the callback if the state changes return ( <input type="button" disabled={isSending} onClick={sendRequest} /> ) }

No necesita un efecto para enviar una solicitud al hacer clic en el botón, en cambio, lo que necesita es solo un método de controlador que puede optimizar usando el método useCallback

 const App = (props) => { //define you app state here const fetchRequest = useCallback(() => { // Api request here }, [add dependent variables here]); return ( <input type="button" disabled={sendRequest} onClick={fetchRequest} ); }

El seguimiento de la solicitud usando la variable con useEffect no es un patrón correcto porque puede establecer el estado para llamar a la API usando useEffect, pero un procesamiento adicional debido a algún otro cambio hará que la solicitud entre en un bucle

En la programación funcional, cualquier función asíncrona debe considerarse como un efecto secundario.

Cuando se trata de efectos secundarios, debe separar la lógica de iniciar el efecto secundario y la lógica del resultado de ese efecto secundario (similar a la saga redux).

Básicamente, la responsabilidad del botón solo activa el efecto secundario, y la responsabilidad del efecto secundario es actualizar el dom.

Además, dado que reaccionar se trata de componentes, debe asegurarse de que su componente aún esté montado antes de cualquier setState o después de cada await , esto depende de sus propias preferencias.

para resolver este problema, podemos crear un gancho personalizado useIsMounted este gancho nos facilitará verificar si el componente aún está montado

 /** * check if the component still mounted */ export const useIsMounted = () => { const mountedRef = useRef(false); const isMounted = useCallback(() => mountedRef.current, []); useEffect(() => { mountedRef.current = true; return () => { mountedRef.current = false; }; }); return isMounted; };

Entonces tu código debería verse así

 export const MyComponent = ()=> { const isMounted = useIsMounted(); const [isDoMyAsyncThing, setIsDoMyAsyncThing] = useState(false); // do my async thing const doMyAsyncThing = useCallback(async () => { // do my stuff },[]) /** * do my async thing effect */ useEffect(() => { if (isDoMyAsyncThing) { const effect = async () => { await doMyAsyncThing(); if (!isMounted()) return; setIsDoMyAsyncThing(false); }; effect(); } }, [isDoMyAsyncThing, isMounted, doMyAsyncThing]); return ( <div> <button disabled={isDoMyAsyncThing} onClick={()=> setIsDoMyAsyncThing(true)}> Do My Thing {isDoMyAsyncThing && "Loading..."} </button>; </div> ) }

Nota: siempre es mejor separar la lógica de su efecto secundario de la lógica que desencadena el efecto ( useEffect )

ACTUALIZAR:

En lugar de toda la complejidad anterior, solo use useAsync y useAsyncFn de la biblioteca react-use . Es mucho más limpio y directo.

Ejemplo:

 import {useAsyncFn} from 'react-use'; const Demo = ({url}) => { const [state, doFetch] = useAsyncFn(async () => { const response = await fetch(url); const result = await response.text(); return result }, [url]); return ( <div> {state.loading ? <div>Loading...</div> : state.error ? <div>Error: {state.error.message}</div> : <div>Value: {state.value}</div> } <button onClick={() => doFetch()}>Start loading</button> </div> ); };