当CSS调整为React中的URL时，出现了一个奇怪的事件处理错误

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

我正试图在React网站中创建一个组件级事件处理程序(图像库/滑块中的箭头导航(。

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

我有另一个函数，它读取URL以获得最后一个数字，例如/0或/5，以自动调整容器的左侧CSS值，从而使其关注正确的图像(与URL字符串中的数字对应的图像(。这是有效的。React的useParams没有。

奇怪的是，只有当URL在/0上结束时，我的箭头导航才能完美地工作(调整图像包装，使第一个剩下：0%(。

当我用say"；http://....images/1"，左箭头必须按下两到三次，而右箭头使事物滑动两个图像。此外，条件键会失败，因此在这种情况下，所有其他键也会产生向右箭头向左滑动。

这是我在React中遇到的许多疯狂bug之一。有时成功有时失败的事情根本无法取得成效。

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结尾的CSS调整函数封装在useEffect((中，并且有一个小的改进：现在左箭头幻灯片开始时在幻灯片方向上有一个轻微的抖动。左箭头现在必须按下2次，而不是3次。只有当我之前按下向左箭头时，向右箭头只会响应1次按下。

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

谢谢你的任何想法！