Question

我有一个演示here

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

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

我正在使用 window.pageYOffset 并检查它何时超过一个数字然后设置 useState 然后使用它来显示导航

控制台正在输出 window.pageYOffset，但 useState 没有更新。

在控制台中 setState 没有更新

我不明白为什么

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"));

Answer 1

在 react 中设置 state 是一个异步操作，不会立即生效，如果你需要检查新的变化，你需要使用 useEffect 钩子这样：

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>
  );
};

这是一个工作演示：https://stackblitz.com/edit/react-ts-qa44xu?file=index.tsx

Answer 2

您的代码运行良好。即使向下滚动也看不到导航的原因是因为您尚未将导航组件的位置设置为固定位置。如果您只是将 position: "fixed" 属性添加到 div 中，它会起作用。

我在这里分叉了你的代码。你可以检查一下。 https://stackblitz.com/edit/react-ts-jgjhxb?file=style.css

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

反应 - useState 不更新

2 个答案: