reactjs - קריאת React Hook "useState" מותנית

React מתלוננת על הקוד למטה, ואומרת ש-useState ו-useEffect נקראים באופן מותנה. הקוד עובד בסדר בלי TypeScript:

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;

תשובה #1

יש לך החזרה מוקדמת ולכן זה נקרא בתנאי if (typeof window === "undefined") return 500;

אתה צריך להעביר את ה-hooks לפני החזרה המוקדמת. להסבר מפורט קרא את זה https://reactjs.org/docs/hooks-rules.html

תשובה #2

עבירו את ה-return לתחתית הפונקציה ועבירו מערך ריק לפרמטר השני של useEffect כדי שהקוד הקיים ב-useEffect ירוץ רק פעם אחת.

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

const useScrollPosition = () => {
    

    // 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);
        };
    }, []); // set an empty array for run once existing code in the useEffect

   return typeof window === "undefined" ? return 500 : <></>; // a value must be returned
    
};

export default useScrollPosition;