时间戳

首页 > 解决方案 > React 状态钩子对于不同的调用表现不同

javascript - React 状态钩子对于不同的调用表现不同

问题描述

我正在开发一个简单的演示应用程序，它从 GitHub API 中提取一些数据并在卡片上显示个人资料信息。卡片可以通过按钮或按键进行导航。

我想确保计数器，我曾经作为道具发送到组件以显示特定信息object[count]，符号一旦到达数组末尾，就会重置回 0，或者如果减少计数器，则向前跳到 30（数组的大小）当值为 0 时加 1，因此它将循环回到数组的末尾而不是 -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;

标签： javascriptreactjs

解决方案

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

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

推荐阅读