在事件处理程序中调用react钩子

Question

我需要重新抓取数据，如果我点击一些按钮，但当我调用钩子内点击处理程序，我得到以下错误

const Menus = ({ menus, title }) => {
const handleClick = () => {
const { data: cartItems } = useFetch(API_URL + 'cart');
}
}

srccomponents menu .js | Line 26:13: React Hook "useFetch"在函数"handleMenu"它既不是React函数组件，也不是自定义React Hook函数。React组件名必须以大写字母React -hooks/rules-of-hooks

开头

Answer 1

React钩子不能在纯JavaScript函数中使用。它将打破钩子的规则。Hooks只能在React函数组件中使用。返回ReactElement的函数将被视为React函数组件，而不是JS中的普通函数。

您应该在useFetch钩子中返回数据和数据获取函数。以便以后可以使用数据获取功能。

。

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>
);
};

Answer 2

如错误所述，该问题违反了钩子规则(react-hooks/rules-of-hooks)更多信息可在这里找到:https://reactjs.org/docs/hooks-rules.html

你只能在功能组件的顶层使用钩子，但是handleClick()函数会把钩子放在第二层而不是顶层。