如果我點擊某個按鈕，我需要重新獲取資料，但是當我在點擊處理程式中呼叫鉤子時，我收到以下錯誤
const Menus = ({ menus, title }) => {
const handleClick = () => {
const { data: cartItems } = useFetch(API_URL 'cart');
}
}
src\components\Menus.js | 第 26:13 行：在函式“handleMenu”中呼叫 React Hook“useFetch”，該函式既不是 React 函陣列件，也不是自定義 React Hook 函式。React 組件名稱必須以大寫字母開頭 react-hooks/rules-of-hooks
uj5u.com熱心網友回復：
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>
);
};
uj5u.com熱心網友回復：
正如錯誤所提到的，該問題違反了鉤子規則 ( react-hooks/rules-of-hooks) 更多資訊可以在這里找到：https :
//reactjs.org/docs/hooks-rules.html
您只能在功能組件的頂層使用鉤子，但handleClick()函式會將鉤子放在第二層而不是頂層。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/310952.html
標籤：javascript 反应 反应钩子 事件处理 拿来
上一篇：如何使用材料ui中的“樣式”反應