使用Intersection Observer更新React状态时的状态访问问题

问题核心 #

从代码中可定位三个关键问题：

1. 状态值被意外封装为对象：控制台打印{backgroundColor: 'gradient'}，说明某次状态更新传入了对象而非字符串，导致backgroundColor === "solid"判断永远不成立，输出[object Object]。
2. Observer重复触发回调：无依赖项的useEffect会重复创建Observer实例，加上阈值设为0时元素进出视口易触发多次回调，导致每次观测产生4条日志。
3. 状态值偶尔为undefined：Observer回调捕获旧状态闭包，或DOM元素未正确初始化，导致状态读取异常。

修复步骤 #

1. 确保状态更新仅传入字符串 #

检查所有调用updateBackgroundColor的逻辑，禁止传入对象类型值。同时在状态判断处增加防御性处理：

console.log(backgroundColor);
// 兼容状态为对象/undefined的异常情况
const actualColor = typeof backgroundColor === 'object' 
  ? backgroundColor.backgroundColor 
  : backgroundColor || 'gradient';

if (actualColor === "solid") {
  console.log("background is solid");
} else {
  console.log(`background is ${actualColor}`);
}

2. 优化Observer的创建与清理 #

用useCallback包裹状态更新函数，避免每次渲染生成新函数；给useEffect添加依赖项并增加清理逻辑，防止重复创建Observer：

// 用useCallback稳定函数引用
const handleBackgroundColorUpdate = useCallback((color) => {
  updateBackgroundColor(color);
}, []);

useEffect(() => {
  const observer = setIntersectionObservers(handleBackgroundColorUpdate);
  // 组件卸载/依赖变化时断开监听
  return () => {
    observer?.disconnect();
  };
}, [handleBackgroundColorUpdate]);

3. 减少Observer触发次数 #

调整阈值为0.1（元素10%进入视口时触发），同时在回调中判断状态是否需要更新，避免重复执行：

// 用useRef保存最新状态，解决闭包问题
const backgroundColorRef = useRef(backgroundColor);
useEffect(() => {
  backgroundColorRef.current = backgroundColor;
}, [backgroundColor]);

const skillsTestObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      const targetColor = entry.isIntersecting ? "solid" : "gradient";
      // 仅当状态需要变化时更新
      if (targetColor !== backgroundColorRef.current) {
        handleBackgroundColorUpdate(targetColor);
      }
    });
  },
  { threshold: 0.1 }
);

4. 排查状态undefined问题 #

确保setIntersectionObservers中监听的DOM元素存在，避免空值导致的异常：

const setIntersectionObservers = (callback) => {
  const skillsElement = document.getElementById('skills-section');
  if (!skillsElement) return null;
  
  const observer = new IntersectionObserver(/* 回调逻辑 */);
  observer.observe(skillsElement);
  return observer;
};

内容的提问来源于stack exchange，提问作者Jenny Sukut