Necesito volver a obtener datos si hago clic en algún botón, pero cuando llamo al gancho dentro del controlador de clic, aparece el siguiente error
const Menus = ({ menus, title }) => { const handleClick = () => { const { data: cartItems } = useFetch(API_URL + 'cart'); } }src\components\Menús.js | Línea 26:13: React Hook "useFetch" se llama en la función "handleMenu" que no es un componente de la función React ni una función React Hook personalizada. Los nombres de los componentes de React deben comenzar con una letra mayúscula react-hooks/rules-of-hooks
Los ganchos de reacción no se pueden usar dentro de una función de JavaScript pura. Romperá las reglas de los ganchos. Los ganchos solo se pueden usar en los componentes de la función React. Una función que devuelve ReactElement se tratará como un componente de función React en lugar de una función normal en JS.
Debe devolver los datos y una función de obtención de datos en el useFetch . Para que pueda usar la función de obtención de datos más adelante.
P.ej
import React from 'react'; import { useCallback, useEffect, useState } from 'react'; const API_URL = 'http://localhost:8080/api/'; const api = { async getCartItems() { return ['apple', 'banana']; }, }; function useFetch(url: string) { const [cartItems, setCartItems] = useState<string[]>([]); // fetch data later use this function. const getCartItems = useCallback(() => { return api.getCartItems().then((res) => { setCartItems(res); }); }, [url]); // fetch data when component mount useEffect(() => { getCartItems(); }, [url]); return { data: cartItems, getCartItems }; } const Menus = () => { const { data: cartItems, getCartItems } = useFetch(API_URL + 'cart'); const handleClick = () => { getCartItems(); }; return ( <div onClick={handleClick}> <ul> {cartItems.map((item, i) => { return <li key={i}>{item}</li>; })} </ul> </div> ); };Como menciona el error, el problema viola las reglas de los ganchos ( react-hooks/rules-of-hooks ). Puede encontrar más información aquí: https://reactjs.org/docs/hooks-rules.html
Solo puede usar ganchos en el nivel superior de los componentes funcionales, pero la función handleClick() colocaría el gancho en el segundo nivel en lugar del nivel superior.