javascript - react 钩子(Hook) useEffect 更新 window.innerHeight

Question

我想在调整屏幕大小时使用内部窗口高度更新状态。当我在 useEffect 中记录状态高度时钩子(Hook)我每次都得到 0 但是，当我登录 updateWindowDimensions 时函数高度值按预期更新。

如何每次都使用新值更新状态？

const [height, setHeight] = useState(0);

const updateWindowDimensions = () => {
    const newHeight = window.innerHeight;
    setHeight(newHeight);
    console.log('updating height');   
};

 useEffect(() => {
     window.addEventListener('resize', updateWindowDimensions);
     console.log("give height", height);
 }, []);

Answer 1

您的 useEffect仅在组件挂载时运行一次(因为空数组 [] 您作为第二个参数传递)

如果您只是在它之外登录，您将看到您的状态值正在正确更新

  const [height, setHeight] = useState(0);

  useEffect(() => {
    const updateWindowDimensions = () => {
      const newHeight = window.innerHeight;
      setHeight(newHeight);
      console.log("updating height");
    };

    window.addEventListener("resize", updateWindowDimensions);

    return () => window.removeEventListener("resize", updateWindowDimensions) 

  }, []);

  console.log("give height", height);

此外，您应该将该函数的声明移到 useEffect 中。所以它不会在每次渲染时重新声明