React Hooks中的removeEventListener使用问题

Question

const App= ()=>{
    const divRef = useRef()
    useEffect(()=>{
        const test = () => { console.log('click'); }
        
        divRef.current.addEventListener('click', test)
        return ()=>{
            divRef.current.removeEventListener('click', test)
        }
    })
    return <div ref={divRef}>111</div>
}

当App组件卸载的时候，就会警告 Cannot read property 'removeEventListener' of null

有特殊写法可以避免这个问题吗 ？

Answer 1

改改：

const App= ()=>{
    const divRef = useRef()
    useEffect(()=>{
        const test = () => { console.log('click'); }
        const currentDivRef = divRef.current;
        
        currentDivRef.addEventListener('click', test)
        return ()=>{
            currentDivRef.removeEventListener('click', test)
        }
    })
    return <div ref={divRef}>111</div>
}