reactjs - 通过拖动更改屏幕宽度时出错。如何使用 react-spring 进行响应式设计？

Question

在更改屏幕宽度以检查响应时出现以下错误并且屏幕变空。

但在那之后，如果页面刷新所有内容都可见并根据响应代码适应当前宽度。但只有在拖动屏幕宽度时才会出错。无法识别此错误来源，假设来自 Nav。

我在这里附上了导航代码。

import React, { useState, useEffect } from "react";
import { useSpring, animated } from "react-spring";
import { NavLink, Link, useLocation } from "react-router-dom";

import classes from "./Nav.module.scss";
import Logo from "../assets/logo.png";

const Nav = ({ mq: { tabPort } }) => {
  const [yoffset, setYoffset] = useState(window.pageYOffset);

  let { pathname } = useLocation();

  const [navMenuOpen, setNavMenuOpen] = useState(false);

  const handleScroll = () => {
    setYoffset(window.pageYOffset);
  };

  const handleNavMenu = (e) => {
    setNavMenuOpen((c) => !c);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  });

  const { navY, o, m } = useSpring({
    navY: navMenuOpen ? 0 : -100,
    o: navMenuOpen ? 1 : 0,
    m: navMenuOpen ? 3 : -10,
  });

  const navUp = useSpring({
    from: {
      paddingLeft: tabPort.matches ? 0 : `8rem`,
      paddingRight: tabPort.matches ? 0 : `8rem`,
    },
    paddingLeft: tabPort.matches ? 0 : yoffset > 50 ? `6rem` : `8rem`,
    paddingRight: tabPort.matches ? 0 : yoffset > 50 ? `6rem` : `8rem`,
    height: yoffset > 50 ? `8rem` : `9rem`,
    config: { mass: 5, tension: 350, friction: 80 },
  });
  const fadeInNav = useSpring({
    opacity: 1,
    from: { opacity: 0 },
    delay: 1000,
  });

  const [{ y1 }, setHover1] = useSpring(() => ({ y1: 100 }));
  const [{ y2 }, setHover2] = useSpring(() => ({ y2: 100 }));
  const [{ y3 }, setHover3] = useSpring(() => ({ y3: 100 }));
  const [{ y4 }, setHover4] = useSpring(() => ({ y4: 100 }));

  useEffect(() => {
    if (pathname === "/services") {
      setHover1({ y1: 0 });
      setHover2({ y2: 100 });
      setHover3({ y3: 100 });
      setHover4({ y4: 100 });
    } else if (pathname === "/about") {
      setHover1({ y1: 100 });
      setHover2({ y2: 0 });
      setHover3({ y3: 100 });
      setHover4({ y4: 100 });
    } else if (pathname === "/portfolio") {
      setHover1({ y1: 100 });
      setHover2({ y2: 100 });
      setHover3({ y3: 0 });
      setHover4({ y4: 100 });
    } else if (pathname === "/contact") {
      setHover1({ y1: 100 });
      setHover2({ y2: 100 });
      setHover3({ y3: 100 });
      setHover4({ y4: 0 });
    } else {
      setHover1({ y1: 100 });
      setHover2({ y2: 100 });
      setHover3({ y3: 100 });
      setHover4({ y4: 100 });
    }
  }, [pathname]);

  let navMenu = (
    <div className={classes.navList}>
      <NavLink
        to='/services'
        className={classes.navList__item}
        activeClassName={classes.nav__itemActive}
        onMouseEnter={() =>
          setHover1({ y1: pathname === "/services" ? 0 : 60 })
        }
        onMouseLeave={() =>
          setHover1({ y1: pathname === "/services" ? 0 : 100 })
        }
        onClick={() => setNavMenuOpen(false)}>
        <animated.p
          className={classes.nav__itemText}
          style={{
            marginTop: m.interpolate((m) => `${m}rem`),
            marginBottom: m.interpolate((m) => `${m}rem`),
          }}>
          Services
        </animated.p>
        <animated.div
          style={{ transform: y1.interpolate((v) => `translateX(${v}%`) }}
          className={classes.glance}
        />
      </NavLink>

      <NavLink
        to='/about'
        className={classes.navList__item}
        onMouseEnter={() => setHover2({ y2: pathname === "/about" ? 0 : 60 })}
        onMouseLeave={() => setHover2({ y2: pathname === "/about" ? 0 : 100 })}
        onClick={() => setNavMenuOpen(false)}>
        <animated.p
          style={{
            marginTop: m.interpolate((m) => `${m}rem`),
            marginBottom: m.interpolate((m) => `${m}rem`),
          }}>
          About
        </animated.p>
        <animated.div
          style={{ transform: y2.interpolate((v) => `translateX(${v}%`) }}
          className={classes.glance}
        />
      </NavLink>

      <NavLink
        to='/portfolio'
        className={classes.navList__item}
        onMouseEnter={() =>
          setHover3({ y3: pathname === "/portfolio" ? 0 : 60 })
        }
        onMouseLeave={() =>
          setHover3({ y3: pathname === "/portfolio" ? 0 : 100 })
        }
        onClick={() => setNavMenuOpen(false)}>
        <animated.p
          style={{
            marginTop: m.interpolate((m) => `${m}rem`),
            marginBottom: m.interpolate((m) => `${m}rem`),
          }}>
          Portfolio
        </animated.p>
        <animated.div
          style={{ transform: y3.interpolate((v) => `translateX(${v}%`) }}
          className={classes.glance}
        />
      </NavLink>

      <NavLink
        to='/contact'
        className={classes.navList__item}
        onMouseEnter={() => setHover4({ y4: pathname === "/contact" ? 0 : 60 })}
        onMouseLeave={() =>
          setHover4({ y4: pathname === "/contact" ? 0 : 100 })
        }
        onClick={() => setNavMenuOpen(false)}>
        <animated.p
          style={{
            marginTop: m.interpolate((m) => `${m}rem`),
            marginBottom: m.interpolate((m) => `${m}rem`),
          }}>
          Contact
        </animated.p>
        <animated.div
          style={{ transform: y4.interpolate((v) => `translateX(${v}%`) }}
          className={classes.glance}
        />
      </NavLink>
    </div>
  );

  return (
    <nav>
      <animated.div className={classes.nav} style={{ ...fadeInNav, ...navUp }}>
        <Link
          to='/'
          className={classes.nav__logoLinkWrapper}
          onClick={() => setNavMenuOpen(false)}>
          <img src={Logo} className={classes.nav__logoImage} />
        </Link>
        <div className={classes.navBtn} onClick={handleNavMenu}>
          <span className={classes.navBtn__icon}>&nbsp;</span>
        </div>
        <div className={classes.navMenu__wideScreen}>{navMenu}</div>
      </animated.div>
      <animated.div
        className={classes.navMenu__smallScreen}
        style={{
          transform: navY.interpolate((y) => `translate3d(0, ${y}%, 0)`),
          opacity: o.interpolate((o) => `${o}`),
        }}>
        {navMenu}
      </animated.div>
    </nav>
  );
};

export default Nav;

这是控制台中的错误。

标签： reactjsreact-spring