Reactjs 如何在react中编写清理函数？

我一直在努力理解如何修复useffect（）中的内存泄漏，但仍然很难理解

错误代码说，为了修复泄漏，我必须使用清理功能取消所有订阅和异步调用。 这就是我的代码目前的样子

const [dish,setDish] = useState({title:""})

useEffect(()=>{
    fetchDish()
},[dish.title])

const fetchDish = async() => {

    const apiCall = await fetch('https://exampleurl.json')
    const dishes = await apiCall.json()
    setDish(dishes[props.dishID] )

}

---

我假设我得到了内存泄漏，因为一旦卸载，我必须销毁我的dish对象？

您需要在这里使用componentWillUnmount技术，因为这是一个从useEffect返回的功能组件，将导致相同的行为

例如：

 useEffect(() => {
        fetchDish()
    
        return () => {
          //unmounting code here..
          //in your case 
          setDish({})
        }
   }, [dish.title])

---

首先，我认为你应该阅读丹·阿布拉莫夫的这篇文章，以便更好地理解

useffect

如果只在useEffect中使用该函数，则将其移动到useEffect中，以使其不影响数据流。如果要重复使用

fetchDish

，请使用

useCallback

，这样，如果不需要它，就不会调用它

如果您的案例是关于清理代码，那么Rishav的答案是正确的

useEffect( () => {
  subscribe();
  return () => unsubscribe();
}

然而，我认为react试图告诉您的是因为您的异步调用不断被调用

尝试将您的代码修改为此

const [dish,setDish] = useState({title:""})

useEffect(()=>{
    async function fetchDish(){

        const apiCall = await fetch('https://exampleurl.json')
        const dishes = await apiCall.json()
        setDish(dishes[props.dishID] )

    }
    fetchDish()
},[])

---

好的，我读到问题是当我的fetch解决时，它执行一个setState，问题是，如果组件卸载了，并且它仍然在进行fetch，那么一旦解决了，setState就会在一个未装载的组件中激发。。。因此，我必须以某种方式检查组件是否已安装。。