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

Question

如果我点击某个按钮，我需要重新获取数据，但是当我在点击处理程序中调用钩子时，我收到以下错误

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

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()函数会将钩子放在第二层而不是顶层。