Question

我有一个isDesktop布尔值，该值应根据sceensize设置为true或false，但这可以在初始渲染中将其设置为true / false，但如何在初始渲染中将其设置为true？

 const [isVisible, setIsVisible] = useState(false)
  const [isDesktop, setIsDesktop] = useState(window.innerWidth)

  console.log(isDesktop)
  useEffect(() => {
    window.addEventListener("scroll", UpdateScrollPosition);
    window.addEventListener("resize", displayWindowSize);
    return () => window.removeEventListener("scroll", UpdateScrollPosition);
  }, []);

  const UpdateScrollPosition = () => {
    const scrollPos = window.scrollY
    if( scrollPos < 520) {
      return setIsVisible(false)
    }else if (scrollPos >= 520 && scrollPos <= 1350) {
      return setIsVisible(true)
    }else if (scrollPos > 1350) {
      return setIsVisible(false)
    }
  }

  const displayWindowSize = () => {
    let w = window.innerWidth;
    if(w >= 500) {
      return setIsDesktop(true)
    } else {
      return setIsDesktop(false)
    }    
  }

Answer 1

window.innerWidth不是布尔值。如果您打算将0以外的其他值设置为true，则可以执行以下操作：

const [isDesktop, setIsDesktop] = useState(!!window.innerWidth)

您还可以将其与断点进行比较：

const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 500);

编辑：

如果您想在isDesktop处理程序中使用UpdateScrollPosition，则需要在isDesktop更改后注销旧的处理程序并将新的处理程序注册为侦听器：

const UpdateScrollPosition = useCallback(() => {

    // this now depends on isDesktop
    console.log(isDesktop);

    // .... other code

}, [isDesktop]); // IMPORTANT: add isDesktop here as a dependency

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

    return () => window.removeEventListener("scroll", UpdateScrollPosition);
}, [UpdateScrollPosition]); // IMPORTANT: Add UpdateScrollPosition here as a dependency

这是什么？：

当useCallback依赖项更改时，

isDesktop将重新创建您的处理程序。当UpdateScrollPosition发生更改时，您的效果将重新绑定处理程序（在isDesktop发生更改时，通常会发生这种情况，因为我们将其添加为依赖项）。

初始渲染时未设置useState的值

1 个答案: