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>
}

Answer 2

import React, { useEffect, useRef } from 'react';

const App = () => {
  const divRef = useRef();

  const test = () => {
    console.log('click');
  };

  useEffect(() => {
    if (divRef.current) {
      divRef.current.addEventListener('click', test);
    }

    return () => {
      if (divRef.current) {
        divRef.current.removeEventListener('click', test);
      }
    };
  }, []); 

  return <div ref={divRef}>111</div>;
};

export default App;