如何在未安装的组件上停止内存泄漏

Question

我试图使用axios提取数据，并将提取的数据插入到我的useState挂钩中，该挂钩必须是数组，但内存泄漏有错误，我尝试了所有方法，使用清理函数，我还尝试了new AbortController();取消提取，还尝试了放置isMount布尔变量来停止该错误，但它仍然弹出相同的错误

这是我的组件代码，一切都很简单

import { useEffect, useState, FC, useRef } from "react"
import Card from "../Dashboard/Card"
import axios from "axios"
import "../../less/profile-styles/user-blogs-styles.css"
import "../../less/dashboard-style/loader.css"
const UserBlogs: FC<{ id: string; name: string }> = ({ name, id }) => {
const [userBlogs, setUserBlogs] = useState<any>([])
const [isLoading, setIsLoading] = useState<boolean>(false)
useEffect(() => {
let abortController = new AbortController();
// let isMinted: boolean = true
setIsLoading(true)
axios
.get(`http://localhost:5000/blog/blog-user/${id}`)
.then((response) => {  //also I inserted here if statement, to check if isMunted true or not, if it true perform that inserting data in useState
setUserBlogs(
response.data.map((blog: any) => {
return {
title: blog.blog.title,
img: blog.blog.file,
liked: blog.blog.likes,
mainContent: blog.blog.mainContent,
authorID: blog.userID,
blogId: blog.blog._id
}
})
)

setIsLoading(false)
})
.catch((err) => console.log(err))

return () => {
abortController.abort()
//isMunted = false
}
}, [])
console.log(userBlogs)
return (
<div className="user-blogs">
<h1>{name}'s blogs</h1>
<div className="dashboard-container">
{
userBlogs.map((blog: any) => {
return (
<Card
title={blog.title}
img={blog.img}
liked={blog.likes}
mainContent={blog.mainContent}
authorID={blog.userId}
blogId={blog._id}
likeSystem={() => {}}
/>)
}
)
}
</div>
</div>
)
}
export default UserBlogs

这是错误

无法对未安装的组件执行React状态更新。这是一个非操作，但它表明应用程序中存在内存泄漏。若要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务。

Answer 1

您实际上并没有将abortcontroller.signal设置为axios.get调用。

查看这些axios文档

axios.get('/foo/bar', {
signal: abortController.signal
}).then(...)
...
abortController.abort()