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

Question

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

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

src\components\Menus.js | Line 26:13: React Hook "useFetch" is called in function "handleMenu" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks

Answer 1

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

您只能在函数组件的顶层使用挂钩，但 handleClick() 函数会将挂钩放在第二层而不是顶层。

Answer 2

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

您应该 return 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>
  );
};

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

Call react hooks inside event handler

javascript

event-handling

fetch

reactjs

react-hooks