开发报错:
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
该警告通常在 React 组件卸载后,仍然尝试更新组件状态时触发。这可能是因为在组件卸载后,异步任务或订阅仍在进行,导致在回调中试图更新已卸载的组件状态。
解决这个问题,可以在组件卸载时取消所有的订阅和异步任务。在 React 组件中,可以使用 useEffect 钩子函数的清除函数来处理。
示例:清理以下异步任务 避免内存泄漏
// 清理前
useEffect(() => {
setTimeout(() => {
setTooltipVisible(false);
}, 1200);
}, []);
// 清理后
useEffect(() => {
let timeoutId;
timeoutId = setTimeout(() => {
setTooltipVisible(false);
}, 1200);
return () => {
clearTimeout(timeoutId); // 在组件卸载时清除定时器
};
}, []);