Question

我有这个钩子：

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

但出于某种原因，在关联的按键上，handleKeyPress 函数会被调用两次。我尝试将 handleKeyPress 添加为依赖项，但也不起作用。有什么想法吗？

Answer 1

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

Answer 2

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

Answer 3

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

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

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

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

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

3 个答案: