Javascript 当滚动点击位置时显示元素

我正在尝试做一个滚动到顶部按钮。我已经完成了上半部分的卷轴，但我正在努力完成显示部分。我错过了什么

当位置返回正确的值但我的“显示”不起作用时，

show操作。这是我得到的

import React, { useEffect, useState } from 'react'
import ArrowDown from "components/svg/ArrowDown"
import { injectIntl } from "react-intl"
import { useMediaQuery } from 'react-responsive'
import { TO_MEDIUM } from 'core/ui/breakpoints'

const TheToTop = ({ intl }) => {
  const [windowHeight, setWindowHeight] = useState(0)

  const toMedium = useMediaQuery({
    query: TO_MEDIUM
  })

  const scrollAction = () => {
    const htmlElement = document.querySelector('html')

    htmlElement.scrollTo({
      top: 0
    })
  }

  const showActionWhenPosition = () => {
    const scrollPosition = window.scrollY
    console.log(scrollPosition)

    if (scrollPosition > windowHeight) {
      console.log('yes')
    } else {
      console.log('no')
    }

    return scrollPosition > windowHeight
  }

  useEffect(() => {
    setWindowHeight(window.innerHeight / 2)
  }, [])

  useEffect(() => {
    document.addEventListener('scroll', showActionWhenPosition)

    return () => {
      document.removeEventListener('scroll', showActionWhenPosition)
    }
  })

  return (
    <React.Fragment>
      {(toMedium && showActionWhenPosition()) && <button className="to-top" onClick={() => scrollAction()}>
        <ArrowDown className="to-top__action-svg-arrow" />
      </button>}
    </React.Fragment>
  )
}

export default injectIntl(TheToTop)

import React，{useffect，useState}来自“React”
从“组件/svg/ArrowDown”导入ArrowDown
从“react intl”导入{injectIntl}
从“react responsive”导入{useMediaQuery}
从“core/ui/breakpoints”导入{TO_MEDIUM}
常量主题=（{intl}）=>{
常量[windowHeight，setWindowHeight]=使用状态（0）
常量toMedium=useMediaQuery({
查询：至中
})
常量滚动动作=（）=>{
const htmlElement=document.querySelector（'html'）
htmlElement.scrollTo({
排名：0
})
}
当位置=（）=>{
const scrollPosition=window.scrollY
console.log（滚动位置）
如果（滚动位置>窗口高度）{
console.log（'yes'）
}否则{
console.log（'no'）
}
返回滚动位置>窗口高度
}
useffect（（）=>{
setWindowHeight（window.innerHeight/2）
}, [])
useffect（（）=>{
document.addEventListener（'滚动'，显示位置时的操作）
return（）=>{
document.removeEventListener（'scroll'，showActionWhenPosition）
}
})
返回(
{（tomedim&&showActionWhenPosition（））&&scrollAction（）}>
}
)
}
导出默认injectIntl（主题）
您应该使用状态。比如说

import React, { useEffect, useState } from 'react'
import ArrowDown from "components/svg/ArrowDown"
import { injectIntl } from "react-intl"
import { useMediaQuery } from 'react-responsive'
import { TO_MEDIUM } from 'core/ui/breakpoints'

const TheToTop = ({ intl }) => {
  const [windowHeight, setWindowHeight] = useState(0)
  const [shouldShow, setShouldShow] = useState(false)

  const toMedium = useMediaQuery({
    query: TO_MEDIUM
  })

  const scrollAction = () => {
    const htmlElement = document.querySelector('html')

    htmlElement.scrollTo({
      top: 0
    })
  }

  const showActionWhenPosition = () => {
    const scrollPosition = window.scrollY
    console.log(scrollPosition)

    if (scrollPosition > windowHeight) {
      setShouldShow(true)
    } else {
      setShouldShow(false)
    }
  }

  useEffect(() => {
    setWindowHeight(window.innerHeight / 2)
  }, [])

  useEffect(() => {
    document.addEventListener('scroll', showActionWhenPosition)

    return () => {
      document.removeEventListener('scroll', showActionWhenPosition)
    }
  })

  return (
    <React.Fragment>
      {(toMedium && shouldShow ) && <button className="to-top" onClick={() => scrollAction()}>
        <ArrowDown className="to-top__action-svg-arrow" />
      </button>}
    </React.Fragment>
  )
}

export default injectIntl(TheToTop)

import React，{useffect，useState}来自“React”
从“组件/svg/ArrowDown”导入ArrowDown
从“react intl”导入{injectIntl}
从“react responsive”导入{useMediaQuery}
从“core/ui/breakpoints”导入{TO_MEDIUM}
常量主题=（{intl}）=>{
常量[windowHeight，setWindowHeight]=使用状态（0）
const[shouldShow，setShouldShow]=useState（false）
常量toMedium=useMediaQuery({
查询：至中
})
常量滚动动作=（）=>{
const htmlElement=document.querySelector（'html'）
htmlElement.scrollTo({
排名：0
})
}
当位置=（）=>{
const scrollPosition=window.scrollY
console.log（滚动位置）
如果（滚动位置>窗口高度）{
setShouldShow（真）
}否则{
setShouldShow（错误）
}
}
useffect（（）=>{
setWindowHeight（window.innerHeight/2）
}, [])
useffect（（）=>{
document.addEventListener（'滚动'，显示位置时的操作）
return（）=>{
document.removeEventListener（'scroll'，showActionWhenPosition）
}
})
返回(
{（toMedium&&shouldShow）&&scrollAction（）}>
}
)
}
导出默认injectIntl（主题）

由于页面未重新呈现而无法工作的原因