Question

我一直试图了解如何解决useEffect（）中的内存泄漏，但是仍然难以理解。

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

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] )

}

我假设我正在发生内存泄漏，因为一旦卸载，我必须销毁我的餐具对象？

Answer 1

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

例如：

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

Answer 2

首先，我认为您应该阅读Dan Abramov的article，以更好地了解useEffect

如果仅在useEffect中使用该函数，则将其移至useEffect内，以免影响数据流。如果您想重复使用fetchDish，请使用useCallback，以便在不需要时不会被调用。

如果您的案例涉及清除代码，那么里沙夫的答案是正确的

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

但是我认为反应是想告诉你的是因为你的异步呼叫不断被呼叫

尝试对此进行修改

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()
},[])

如何在react中编写清理功能？

2 个答案: