React state 在开发工具中更新 - 但不是在 JS 中？

Question

for some very strange reason the following function does not read the updated react state, even after scrolling for quite a while:

  const handleScroll = () => {
    let shouldBeSticky = false
    console.log (window.scrollY)
    if (window.scrollY >= headerSize) {
      console.log ("Should be sticky")
      shouldBeSticky = true
    }
    else {
      console.log ("Shouldn't be sticky")
      shouldBeSticky = false
    }
    console.log ("navsticky is " + navSticky)
    if (shouldBeSticky && !navSticky) setNavSticky (true)
    else if (!shouldBeSticky && navSticky) setNavSticky (false)
  }

Output after scrolling up and down is always: Should be sticky navsticky is false

The handleScroll is assigned an eventlistener in the useEffect:

  useEffect(() => {
    headerSize = getHeaderSize()
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    }
  }, [])

Many thanks!

Answer 1

the problem did not lie in the state update itself. Rather, one "shouldBeSticky" was triggered, the navbar was unmounted from the dom, messing the whole height check up. The solution was to keep the code as is and rather turn the navbar invisible instead of unmounting it.