组件重新渲染时页面跳转（ReactJS/Gatsby）

Question

描述问题

我正在为某人制作一个非常简单的 ReactJS/Gatsby 网站，但我的一个功能样式组件在重新渲染时遇到了问题。 问题是它导致 window 在重新渲染完成后跳转（滚动）。

重新渲染由用户单击触发 function 的 span 元素（包含在li元素中）触发。

li元素列表由组件的 state 确定。 整个父组件具有固定的高度，这就是我无法诊断问题的原因。

我期望发生的事情

要重新渲染的组件和窗口的滚动 position 保持在用户启动它时的位置。

实际发生了什么

当用户单击元素时，页面似乎会跳转（滚动）。 有时它会这样做并保留在新的 position 中，有时它会这样做然后返回到原始卷轴 position。

我试过的

我已经尝试遵循其他问题的建议，这些问题建议使用event.preventDefault()和其他建议将样式从组件本身移出，而是选择使用类。

这些解决方案都不起作用。

我已经设法明确地发现问题是由于 setActiveTabs - 这会导致ul元素的重新渲染 - 在window.scrollY在它触发之前和完成之后都记录显示不同的值。

编辑2：

我已经设法弄清楚问题在于使列表项可定位。 似乎添加tabIndex="0"属性或使li子元素成为交互式元素都会导致此错误。

有谁知道解决这个问题的方法？

编辑

完整的前端源代码可以在以下 GitHub repo 中找到： https://github.com/MakingStuffs/resinfusion

Answer 1

为了解决这个问题，我需要防止被点击的元素被重新渲染。 为了做到这一点，我编辑了 clickHandler 以便它在设置 state 后使用element.blur() 。

点击处理程序如下：

const forwardClickHandler = event => {
    setLoading(true)
    const clickedSlug =
      event.target.closest("button") !== null
        ? event.target.closest("button").getAttribute("data-slug")
        : event.target.children[0].getAttribute("data-slug")
        
    const categoryObject = getNeedle(clickedSlug, categories, "slug")
    const subCatObject = getNeedle(clickedSlug, subCategories, "slug")
    const serviceObject = getNeedle(clickedSlug, services, "slug")
    const associatedChildren = getAssociatedChildren(
      categoryObject
        ? categoryObject
        : subCatObject
        ? subCatObject
        : serviceObject
    )
    setBgImage(associatedChildren[0].thumb.localFile.childImageSharp.fluid)
    setActiveTabs(associatedChildren)
    event.target.blur()
    return setTimeout(() => setLoading(false), 1000)
  }