时间戳

首页 > 解决方案 > 为什么我的 useState() 钩子没有在 useEffect() 中设置新状态？

reactjs - 为什么我的 useState() 钩子没有在 useEffect() 中设置新状态？

问题描述

试图检测<section>元素是否集中在视口中，我无法 console.log单个 true语句。我正在[isFocused, setIsFocused]为此实现一个钩子。

这是我的窗口：

在此处输入图像描述

我需要这样当Section 2位于窗口顶部时，会出现一个console.log(true)。但是会发生这种情况：

在此处输入图像描述

这是我的实现：

import React, { useEffect, useRef, useState } from "react";

const SectionII = (props) => {
  const sectionRef = useRef();
  const [isFocused, setIsFocused] = useState(false);

  const handleScroll = () => {
    const section = sectionRef.current;
    const { y } = section.getBoundingClientRect(); 

    if(!isFocused && y <= 0) {
      setIsFocused(true);
      console.log(isFocused, y);
    }
  };

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

  

  return (
    <section id="mentorship" ref={sectionRef} style={{borderTop: "1px solid"}}>
      <h1>Section 2</h1>
      <button>Set hash</button>
    </section>
  );
};

export default SectionII;

为什么我的状态不能通过trueinsidesetIsFocused(true)更新if(!isFocused && y <= 0)？

非常感谢您的洞察力。我真的被困住了。

标签： reactjsreact-hooks

解决方案

当您在 react 中使用任何状态管理时，您需要确保在尝试访问新状态值之前设置更改。对于您的示例，您立即console.log(isFocused, y)遵循您的 setState 函数（更改只会出现在下一个 DOM 渲染中）。相反，您应该使用带有设置状态函数的回调，setIsFocused(true, () => console.log(isFocused, y)).

推荐阅读