¿Cómo puedo llamar a fetchData() en un botón con un clic? ¿Debo llamar a la función usando useEffect?
function Subscriptions() { const [allUsers] = useState([]); useEffect(() => { fetchData = async () => { try { // some code } catch (err) { console.log(err); } }; }, []); return ( <Button onclick={fetchData()}>Fetch Data</Button> ); } export default Subscriptions;fetchData está en un ámbito anidado diferente y, por lo tanto, no es accesible para el componente de botón. Use useCallback para definir una devolución de llamada asíncrona:
import React, { useState, useCallback } from "react"; function Subscriptions() { const [allUsers] = useState([]); const fetchData = useCallback(async () => { try { // some code } catch (err) { console.log(err); } }, []); return <Button onClick={fetchData}>Fetch Data</Button>; } export default Subscriptions;gancho useEffect llamado en el momento de la carga. debe definir la función fetchData fuera de useEffect, en realidad no necesita useEffect para esta situación
Debe hacer una función y luego llamar en ambas ocasiones en useEffect y onClick.
function Subscriptions() { const [allUsers] = useState([]); const fetchData = async () => { try { // some code } catch (err) { console.log(err); } }; useEffect(() => { fetchData() }, []); return ( <Button onclick={()=>fetchData()}>Fetch Data</Button> ); } export default Subscriptions;