錯誤：無效的掛鈎調用。 鈎子只能在函數組件的主體內部調用。 使用 React.js 時

Question

我收到一個錯誤：

錯誤：無效的掛鈎調用。 鈎子只能在函數組件的主體內部調用。

我的鈎子代碼：

function WidthAndHeight() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const [height, setHeight] = React.useState(window.innerHeight);

  React.useEffect(() => {
    window.addEventListener("resize", updateWidthAndHeight);
    return () => window.removeEventListener("resize", updateWidthAndHeight);
  });

  const updateWidthAndHeight = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  };

  return (
    {
      "width": width,
      "height": height
    }
  );
}

當我在onMouseEnter上調用它時，它給出了以下錯誤：

class MegaMenu extends React.Component {
  public render() {
    return (
      <div className={styles.MegaMenu}>
        <div className={styles["menu-container"]}>
          <div className={styles.menu}>
            <MenuList Options={menus} />
          </div>
        </div>
      </div>
    )
  }
}

const MenuList = (props: IMenuListProps) => {
  const handleOnMouseEnter = () => {
    if (WidthAndHeight().width > 943) {
      console.log("WidthAndHeight().width")
    }
  }

  return (
    <ul onMouseEnter={handleOnMouseEnter}>
      {
        props.Options.map((Option: IMenu, index: number) => (
          <li key={index} className={(Option.subitem && Option.subitem.length > 0) ? styles["menu-dropdown-icon"] : styles["normal-sub"]} onMouseEnter={handleOnMouseEnter}>
            <a href={Option.link}>{Option.name}</a>
            {/* Base Case */}
            {
              (Option.subitem && Option.subitem.length > 0) &&
              <MenuList Options={Option.subitem} />
            }
          </li>
        ))
      }
    </ul>
  )
}

誰能指導我如何解決這個問題？

Answer 1

您已經創建了自定義鈎子，但使用錯誤。 下面的代碼應該可以工作。

const MenuList = (props: IMenuListProps) => {
  const { width, height } = WidthAndHeight(); // --> call hook in component function body, not in eventhandler!
  const handleOnMouseEnter = () => {
    if (width > 943) {
      //...
    }
  }

  return (
    <ul onMouseEnter={handleOnMouseEnter}>
      {
        props.Options.map((Option: IMenu, index: number) => (
          <li key={index} className={(Option.subitem && Option.subitem.length > 0) ? styles["menu-dropdown-icon"] : styles["normal-sub"]} onMouseEnter={handleOnMouseEnter}>
            <a href={Option.link}>{Option.name}</a>
            {/* Base Case */}
            {
              (Option.subitem && Option.subitem.length > 0) &&
              <MenuList Options={Option.subitem} />
            }
          </li>
        ))
      }
    </ul>
  )
}

Answer 2

您需要為您正在做的事情使用自定義鈎子 -

function useWidthAndHeight() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const [height, setHeight] = React.useState(window.innerHeight);

  React.useEffect(() => {
    window.addEventListener("resize", updateWidthAndHeight);
    return () => window.removeEventListener("resize", updateWidthAndHeight);
  });

  const updateWidthAndHeight = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  };

 const windowData =  {
      "width": width,
      "height": height
    }
  return (
   windowData
  );
}

export default function useWidthAndHeight

然后你可以像這樣導入它。

import useWidthAndWIndow from "./customHook.js"

並將其用作功能組件中的鈎子

const windowData = useWidthAndWIndow()