时间戳

首页 > 解决方案 > 钩子回调中来自 useState 的变量被关闭

react-hooks - 钩子回调中来自 useState 的变量被关闭

问题描述

我使用useKey来响应 Enter。

const [isFocused, setIsFocused] = useState(false);

useKey("Enter", ev => {
     console.log("ev, isFocused -> ", ev, isFocused);
});

但是，即使更改了 isFocused 值，打印的值也始终为 false。

如何防止 useState 变量被冻结为初始值？

标签： react-hooks

解决方案

该useKey钩子支持依赖项（第 4 个参数）：

const useKey = (key: KeyFilter, fn: Handler = noop, opts: UseKeyOptions = {}, deps: DependencyList = [key])

用 包装事件处理程序useCallback并将其依赖项设置为isFocused，然后将事件处理程序作为依赖项传递给useKey。如果isFocused更改，eventHandler更改，useKey并将相应更新：

const eventHandler = useCallback(ev => {
  console.log("ev, isFocused -> ", ev, isFocused);
}, [isFocused])

useKey("Enter", eventHandler, {}, [eventHandler]);

推荐阅读