Nextjs 14 事件监听器在 template.js 中不起作用

Question

我有一个layout.js和一个template.js，用于管理模板内的页面过渡效果。

我在template.js中的代码是：

'use client'

import { useEffect, useState } from 'react'

export default function Template({ children }) {
    const [mousePosition, setMousePosition] = useState(null);
    const [isMobile, setIsMobile] = useState(null)

    useEffect(() => {
        const updateMousePosition = ev => {
            setMousePosition(ev.clientY)
            console.log(ev.clientY)
        }
        window.addEventListener('mousemove', updateMousePosition)
        return () => {
            window.removeEventListener('mousemove', updateMousePosition)
        }
    }, [])

    // MOBILE DETECT
    useEffect(() => {
        function handleResize() {
            setIsMobile(window.innerWidth < 768);
        }
        handleResize();
        window.addEventListener('resize', handleResize, {passive:true});
        return () => {
            window.removeEventListener('resize', handleResize);
        }
    }, [])

    return (<>
        {isMobile != null &&
            <main
                style={ isMobile ? {marginTop:`${mousePosition}px`} : {} }
            >
                {children}
            </main>
        } 
    </>)
}

为什么当我在屏幕上上下移动鼠标时

mousePosition

没有登录到控制台？

Answer 1

重构。

"use client"

import * as React from 'react'

export default function Template({children}) {
  const [mousePosition, setMousePosition] = React.useState({
    x: 0,
    y: 0,
  })
  const [isMobile, setIsMobile] = React.useState(false)

  React.useEffect(() => {
    const updateMousePosition = ev => {
      setMousePosition({
        x: ev.clientX,
        y: ev.clientY,
      })
    }

    window.addEventListener('mousemove', updateMousePosition)
    return () => {
      window.removeEventListener('mousemove', updateMousePosition)
    }
  }, [])

  // MOBILE DETECT
  React.useEffect(() => {
    function handleResize() {
      if (window.innerWidth < 768) {
        setIsMobile(true)
      }

      if (window.innerWidth > 768) {
        setIsMobile(false)
      }
    }
    handleResize()
    window.addEventListener('resize', handleResize, {passive: true})
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  const marginTopValue = isMobile ? `${mousePosition.y}px` : '0px'

  return (
    <>
      {isMobile && <main style={{marginTop: marginTopValue}}>{children}</main>}
    </>
  )
}