挂钩回调中useState中的变量被关闭

Question

我使用useKey来回车。

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

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

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

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

Answer 1

useKey hook支持依赖关系（第四参数）：

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);
}, [])

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