He tenido grandes problemas para entender el mejor enfoque para usar/llamar a mis ganchos personalizados dentro de una función. en mi código de reenvío, estoy tratando de llamar a un gancho de búsqueda personalizado en mi app.js
Quiero enviar las siguientes propiedades (nombre y edad) a mi servidor para manejar el almacenamiento de la base de datos allí, por lo que tengo la intención de que esta acción suceda cuando el usuario haga clic en un botón después de completar su nombre y edad. código a continuación
aplicación.js
const [name, setName] = useState('Owen'); const [age, setAge] = useState(22); const handleClick = () => { //if statement to check that name and age where provided const {data,error} = useFetchPost('url',{name:name,age:age}); }usarFetchPost.js
const useFetchPost = ({url, val}) => { const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(()=> { fetch(url,{method:'POST',header: {'Content-Type': 'application/json'}, body:JSON.stringify(val)}) .then(res => return res.json()) .then(data => setData(data)) .catch(err => setError(err)) }, [url, val]) return { data, error } }Los ganchos deben llamarse cuando el componente se renderiza, no cuando ocurre un clic. Pero puede hacer que su enlace devuelva una función y luego llamar a esa función en handleClick. Por ejemplo:
const useFetchPost = () => { const [data, setData] = useState(null); const [error, setError] = useState(null); const doFetch = useCallback((url, val) => { fetch(url, { method: "POST", header: { "Content-Type": "application/json" }, body: JSON.stringify(val), }) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => setError(err)); }, []); return { data, error, doFetch }; }; // used like: const App = () => { const { data, error, doFetch } = useFetchPost(); const handleClick = () => { doFetch(url, { method: "POST", header: { "Content-Type": "application/json" }, }); }; };