当 CSS 调整到 React 中的 URL 时，奇怪的事件处理错误

如何解决当 CSS 调整到 React 中的 URL 时，奇怪的事件处理错误

编辑：这个问题是由于我的自定义 CSS 调整运行了两次。解决方案迫在眉睫。

我正在尝试在 React 网站中创建组件级事件处理程序（图片库/滑块中的箭头导航）。

以下是包含在 useEffect 钩子中的我的实现。我是 React 的新手。老实说，我才刚刚开始了解钩子。

我还有一个函数，就是读出url得到最后一个数字，比如/0或者/5，自动调整容器左边的CSS值，这样就聚焦到了正确的图片（里面的数字对应的那个） URL 字符串）。这是有效的。 React 的 useParams 没有。

奇怪的是，我的箭头导航仅在 URL 以 /0 结尾时才能完美运行（调整图像包装器，使第一个左：0%）。

当我用“http://....images/1”加载页面时，左箭头必须按两三次，右箭头使内容滑动 2 个图像。此外，条件失败，因此在这种情况下，所有其他键也会产生向右箭头向左滑动。

这是我在 React 中遇到的众多疯狂错误之一。有时有效有时失败的事情根本无法提高效率。

React.useEffect(function setupListener() {
        function handleKeyPress(evt) {

            const wrappers = document.getElementsByClassName('bilderwrapper')
            if(document.querySelector('.bilderwrapper') !== null) {
                //evt = evt || window.event
                //alert(evt.keyCode)

                if (evt.keyCode === 37) {

                    if (wrappers[0].style.left !== '0%') slide('left')
                }
                else if (evt.keyCode === 39) {

                    if (wrappers[wrappers.length-1].style.left !== '0%') slide('right')
                }
                // re-focus on Now centered art
                currentArt()
                // check buttons
                checkForUnnecessaryArrows()
            }
    
        }
        window.addEventListener('keydown',handleKeyPress)

        return function cleanupListener() {
          window.removeEventListener('keydown',handleKeyPress)
        }
    })

这是移动东西的代码位：

const getCSSLeftAsBareNumber = (obj) => {
        // get css value str:
        const origLeft = obj.style.left
        // cut off '%':
        const bareNum = origLeft.substring(0,origLeft.length-1) 
        return(parseInt(bareNum))
        // return bareNum
    }

    const slide = dir => {
        const wrappers = document.getElementsByClassName('bilderwrapper')
        if (dir === "left") {
            wrappers.forEach((wrap) => {
                const number = getCSSLeftAsBareNumber(wrap)
                console.log(number)
                wrap.style.left = (number+100)+'%'
            })
        }
        else if (dir === "right"){
            wrappers.forEach((wrap) => {
                const number = getCSSLeftAsBareNumber(wrap)
                console.log(number)
                wrap.style.left = (number-100)+'%'
            })
        }
    }

我已经将整个 URL-ending-css-adjust 函数包装在 useEffect() 中，并且有一个小改进：现在向左箭头滑动开始时在滑动方向上有轻微的抖动。现在必须按左箭头 2 次，从不按 3 次。只有当我之前按下左箭头时，右箭头才响应 1 次。

我无法创建可重现的最小示例。整个项目位于 https://github.com/NeilSentence/galerie-sens

感谢您的任何想法！

解决方法

包含基于 URL 的布局调整的 useEffect() 钩子运行了两次。它采用 CSS 值，重新计算它们，并更新起始值。因为做了两次，所以误差越大，slug数越高。

例如。 “/images/1”创建了一个左移 2，“images/3” 6。我不完全理解的疯狂部分是为什么箭头导航逻辑被这个搞砸了，甚至 alt键开始表现得像一个向右箭头。

解决方案是强制 useEffect() 钩子只运行一次

const [firstRender,setFirstRender] = useState(false)

React.useEffect(() => {

    if (!firstRender) {
        //all code here
        setFirstRender(true)
    }

```