Seminuevo a Reaccionar. Tengo un gancho useFetch que tiene toda mi funcionalidad de recuperación, y quiero llamarlo para obtener la siguiente página de elementos cuando el usuario hace clic en el botón "cargar más elementos".
Obviamente,
<button onClick={() => { useFetch(...) }}>load more items<button> no funcionará porque estoy llamando a un enlace personalizado dentro de una devolución de llamada. ¿Cuál es el mejor patrón en general para hacer este tipo de cosas? Puedo llamar a useFetch en el componente funcional en sí, pero luego se realizará la búsqueda cuando se monte el componente, que no es realmente lo que quiero.
Todo lo que he leído apunta a la utilidad de buscar un gancho, pero solo hace que sea más difícil trabajar con él, especialmente cuando tengo que buscar pequeños fragmentos con frecuencia y dinámicamente.
editar: es posible que lo haya descubierto, publicaré nuevamente con la respuesta si funciona y esta publicación no recibe una respuesta
¡Ay! Los ganchos en React.
Una forma de hacer esto sería definir sus funciones en el método useFetch, que son responsables de realizar las llamadas a la API y luego devolver esas funciones desde el enlace para usarlas donde desee.
Por ejemplo, un enlace useFetch se vería así
const useFetch = () => { const makeApiCall = () => {}; return { makeApiCall } }y luego dentro de su componente
const Comp = () => { const { makeApiCall } = useFetch(); return ( <Button onClick={makeApiCall} /> ) }Siempre puede pasar información relevante al gancho y devolver datos más relevantes del gancho.
No debe llamar a un gancho desde un controlador de eventos, como lo ha notado usted mismo.
Su enlace useFetch() generalmente no debería obtener ningún dato, sino devolver una función a la que puede llamar para obtener datos después.
Su componente se vería así:
const MyComponent = () => { const { fetch, data } = useFetch(); return (<div> <p>{data}</p> <button onClick={() => fetch()}>Load more items</button> </div>); } Su gancho useFetch es entonces responsable de
fetch .data una vez que se ha llamado y resuelto la fetch .data en estado y actualizarlos si data vuelve a llamar a fetch . Así es como se vería el gancho useFetch
function useFetch() { const [data, setData] = useState(); const fetch = async () => { const result = await // call to your API, or whereever you get data from setData(result.data); }; return { fetch, data }; }