时间戳

首页 > 解决方案 > 有条件地调用 React Hook “useState”

reactjs - 有条件地调用 React Hook “useState”

问题描述

React 抱怨下面的代码，说它 useState 和 useEffect 被有条件地调用。没有打字稿，代码工作正常：

import React, { useState, useEffect } from "react";

const useScrollPosition = () => {
  if (typeof window === "undefined") return 500;

  // Store the state
  const [scrollPos, setScrollPos] = useState(window.pageYOffset);

  // On Scroll
  const onScroll = () => {
  setScrollPos(window.pageYOffset);
};

  // Add and remove the window listener
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  });
};

export default useScrollPosition;

标签： reactjstypescriptuse-effectuse-state

解决方案

你有一个提前返回，所以它被有条件地调用if (typeof window === "undefined") return 500;

您需要在提前返回之前移动挂钩。有关详细说明，请阅读此https://reactjs.org/docs/hooks-rules.html

推荐阅读