javascript - react setTimeout - 内存泄漏

Question

我有以下组件，我在其中显示消息 5 秒，然后将其从主页中删除。
当我在页面之间切换时，有时会出现以下错误。任何建议请

    index.js:1 Warning: Can't perform a React state update on an unmounted component. 
This is a no-op, but it indicates a memory leak in your application. 
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

代码:

 const Home = props => {
    
      const [visible, setVisible] = useState(true);
    
       useEffect(() => {
        setTimeout(() => setVisible(false), 5000);
      }, []); 
    
      return (
       <div >
         {visible && <Message showDefault={false}  /> }
         <BaseView  />
    
       </div> 
        
        );
    };

Answer 1

好吧，这个错误其实是不言自明的:由 setTimeout 触发的状态改变函数在组件卸载后调用。但它是变相的无操作:组件不再呈现，为什么有人会对它的内部状态变化感兴趣？
幸运的是，React 提供了 a documented way清理那些和类似的异步状态更改器 - 通过使用 useEffect 返回的函数打回来。像这样:

useEffect(() => {
  const timeoutId = setTimeout(() => setVisible(false), 5000);
  return function cleanup() {
    clearTimeout(timeoutId);
  }
}, []);

请注意，该函数不必命名(但它简化了阅读)。