React页面A持续触发页面B的DOM查询错误，求原因及解决办法

核心问题分析 #

你遇到的问题根源在页面B的update函数里，有两处关键错误：

• DOM查询判断错误：if (('#container').length) 这行只是检查字符串'#container'的长度（永远大于0），根本没有去查询真实的DOM元素。页面A里没有#container元素，所以后续container[0]会是undefined，调用querySelector('#offbutton')就会抛出错误。
• 定时器清理时机错误：clearInterval(checkExist) 放在了定时器回调的外层，不管有没有找到元素，定时器只执行一次就被清除。但如果函数在页面A被意外调用，每次执行都会触发错误，可能导致页面异常跳转。

修正后的代码 #

function update() {
  var checkExist = setInterval(function() {
    // 正确查询DOM元素是否存在
    let container = document.querySelector("#container");
    if (container) {  
      let offbutton = container.querySelector('#offbutton');
      // 找到元素后再清理定时器
      clearInterval(checkExist);
    }
  }, 100);
}

额外注意事项 #

• 确保update函数只在页面B的DOM渲染完成后才被调用，避免在页面A中执行（比如可以通过路由守卫、页面挂载后的触发逻辑控制）。
• 虽然你说不能用useEffect，但如果是在React组件环境下，尽量优先通过React的状态和refs来操作DOM，直接用setInterval轮询DOM是比较hack的写法，容易引发跨页面的异常。

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