我有一篇博客文章是危险的HTML设置。它有这个元素或id ='ad-v2'。根据div id，我想呈现一个不同版本的添加。
然而，当我检查元素时，我的代码无法运行。下面是我的代码：

const [ref, inView] = useInView()
  const [viewed, setViewed] = React.useState(false)
  const [ad, setAd] = React.useState('')

  React.useEffect(() => {
    const target = document.getElementById('ad')
    const targetV2Prevent = document.getElementById('ad-v2')

    const ad = document.getElementById('midroll-add')
    const adV2Prevent = document.getElementById('midroll-add-new')
    if (target && ad) {
      target.replaceWith(ad)
      setAd('ad')
    }

    if (targetV2Prevent && adV2Prevent) {
      targetV2Prevent.replaceWith(adV2Prevent)
      setAd('ad_v2')
    }
  }, [ad])

  if (inView && !viewed) {
    adservice.track('impression', { post: slug })
    setViewed(true)
  }

  return (
    <>
      <div className={styles.Content} dangerouslySetInnerHTML={{ __html: content }} />
      <div ref={ref}>
        {midrollAd && ad === 'ad' ? (
          <MidrollAd midrollAd={midrollAd} />
        ) : (
          <MidrollAdV2 midrollAd={midrollAd} />
        )}
      </div>
    </>
  )

MidrolAd组件的ID设置为“midroll-add”和“midroll-add-new”。这绝对不是语法错误，因为如果我自己运行任何一个组件，它们都可以工作。
当我从React.useState执行ad === 'ad'检查时，if语句似乎没有运行，而当我删除它时，它似乎工作了。我不知道为什么会发生这种情况。我也在Gatsby上运行这个语句，想知道它是否与静态有关，但我不知道为什么。欢迎任何帮助。