Reactjs React-useState未更新

我有一个演示

这是一个超级简单的粘性导航

向下滚动页面时，导航应显示

我正在使用

window.pageYOffset

并检查它何时超过一个数字，然后设置useState，然后使用它来显示导航

控制台正在输出

窗口。pageYOffset

，但useState没有更新

在控制台中，设置状态不会得到更新

我不明白为什么

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import Nav from "./Nav";
import "./style.css";

const App = () => {
  const [sticky, setSticky] = useState(false);

  const handleScroll = () => {
    const position = window.pageYOffset;
    setSticky(position > 50 ? true : false);
    console.log("position = ", position);
    console.log("sticky = ", sticky);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });

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

  return <div className="page">{sticky && <Nav />}</div>;
};

render(<App />, document.getElementById("root"));

import React，{useState，useffect}来自“React”；
从“react dom”导入{render}；
从“/Nav”导入Nav；
导入“/style.css”；
常量应用=（）=>{
const[sticky，setSticky]=使用状态（false）；
常量handleScroll=（）=>{
常量位置=window.pageYOffset；
setSticky（位置>50？真：假）；
console.log（“position=”，position）；
console.log（“sticky=”，sticky）；
};
useffect（（）=>{
addEventListener（“滚动”，handleScroll，{passive:true}）；
return（）=>{
window.removeEventListener（“滚动”，handleScroll）；
};
}, []);
返回{sticky&&}；
};
render（，document.getElementById（“根”））；

在react中设置

状态

是一个异步操作，不会立即生效，如果需要检查新的更改，则需要使用

useffect

钩子进行如下操作：

useEffect(() => {
  console.log('sticky state is: ', sticky);
}, [sticky]);

这是为了看到

sticky state

正在更改，并且

Nav

组件正在显示，但您无法看到它。将其添加到

Nav

组件中，以便查看：

const Nav = () => {
  return (
    <div style={{ position: "fixed", top: 0, left: "300px" }}>
      <nav>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

const Nav=（）=>{
返回(








);
};

---

这是一个有效的演示：

您的代码运行良好。即使向下滚动也看不到导航的原因是您没有将导航组件的位置设置为固定。如果您只需将position:“fixed”属性添加到div中，它就可以工作

我把你的代码分岔到这里了。你可以查一下。

---

正如@Taghi所说，如果你想看到它的更新，你需要使用useffect，因为setState在React中是asnchronous的。我已将其添加到代码中供您检查！：我希望这有帮助

我想你可以在导航中使用

位置：sticky

，使导航更具粘性。状态是异步更新的。使用

useffect

hook记录

sticky

的更新值：

useffect（（）=>{console.log（sticky）；}，[sticky]）为什么不直接使用CSS呢？你尝试过我的解决方案吗？你仍然没有解释为什么导航组件没有show@DennisVash这是因为
Nav
组件是滚动的，此时不可见。我也编辑了我的答案来涵盖这一点