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 中以使其正常工作。

嘗試將其從依賴數組中取出。