Javascript 对于不同的调用，React state钩子的行为不同

我正在开发一个简单的演示应用程序，它从GithubAPI中提取一些数据，并在卡片上显示配置文件信息。卡片可以用按钮或按键导航

我想确保计数器（我用它作为道具发送到组件，以显示带有

对象[count]

的特定信息）在到达数组末尾时会重置为0，或者如果在值为0时将计数器减1，则会提前跳到30（数组大小），这样它会循环回数组末尾，而不是-1，导致越界错误

这种逻辑适用于屏幕上的按钮。另一方面，即使按钮和按键调用相同的功能，按键的行为也不同

我错过了什么

function Card(){
    const [count, setCount] = useState(0);
    const [users, loading] = useFetch("https://api.github.com/users");

    let userCount = loading ? 0 : Number(JSON.parse(JSON.stringify(users)).length);

    const navigateNext = () => {
        setCount(count => count === userCount - 1 ? 0 : count + 1);
    }

    const navigateBack = () => {
        setCount(count => count === 0 ? userCount - 1 : count - 1);
    }

    useKey((pressedKey) => {
        if (pressedKey === 39) {
            navigateNext();
        } else if (pressedKey === 37) {
            navigateBack();
        }

    }, {detectKeys: [39, 37]}); // Keycodes for left and right arrow


    return loading ? (      
        <div className="loading">
            <div></div>
        </div> 
        ) : (
        <div className="card animate-bottom">
            <FontAwesomeIcon className="left-arrow button" icon={faAngleLeft} size="3x" onClick={navigateBack} />{" "}
            <div className="content">
                <Profiles users={users} count={count} />
                <Repos users={users} count={count} />
            </div>
            <FontAwesomeIcon className="right-arrow button" icon={faAngleRight} size="3x" onClick={navigateNext} />{" "}
        </div>
    );
}

export default Card;

功能卡（）{
const[count，setCount]=useState（0）；
const[users，loading]=useFetch（“https://api.github.com/users");
让userCount=load？0:Number（JSON.parse（JSON.stringify（users））.length）；
常量navigateNext=（）=>{
setCount（count=>count==userCount-1？0:count+1）；
}
常量导航返回=（）=>{
setCount（count=>count==0？userCount-1:count-1）；
}
使用键（（按键）=>{
如果（按键===39）{
导航文本（）；
}否则如果（按键===37）{
导航返回（）；
}
}，{detectKeys:[39,37]}）；//左右箭头的键码
返回装载？（
) : (
{" "}
{" "}
);
}
导出默认卡；

实际上，您必须为用户添加依赖项

useKey(
    pressedKey => {
      if (pressedKey === 39) {
        navigateNext()
      } else if (pressedKey === 37) {
        navigateBack(userCount)
      }
    },
    { detectKeys: [39, 37] },
    { dependencies: [userCount] },
)

---

您可以在这里看到repo:for live demo:Check控制台日志，查看它如何使用按钮和左/右箭头键onclick={（）=>navigateBack（）}这应该可以工作。您错过了回调。@vinayakshahdeo Yeh，我应该补充一下，但按钮没问题。问题在于左/右按键