React useEffect 钩子事件监听器触发了两次

Question

我有这个钩子：

useEffect(() => {
        window.addEventListener('keydown', handleKeyPress);
        return () => window.removeEventListener('keydown', handleKeyPress);
        }, [props.tps])

但是，由于某种原因，在关联的按键上，handleKeyPress function 被调用了两次。 我尝试将 handleKeyPress 添加为依赖项，但这也不起作用。 有任何想法吗？

Answer 1

我看到这个很晚，但对于可能有这个问题的其他人：这可能是因为index.js中的React.StrictMode并且在使用钩子时这是有意的。 这是参考

Answer 2

我不确定您为什么添加props.tps ，但尝试将其从依赖项 arrays 中删除。

Answer 3

props.tps在那里没有做任何事情，你需要从依赖数组中删除props.tps因为：

1.- 事件监听器（因为它不是来自组件本身，而是来自window ）应该在“componentDidMount”或等效的空依赖数组上创建。

2.- 依赖数组上的值也应该在 useEffect function 中以使其正常工作。

尝试将其从依赖数组中取出。