react怎么清除副作用

Question

通过接口获取文件流 然后使用FileReader接口转成DataURL 但是当组件卸载时由于onloadend是异步的可能还是会执行setPicUrl 求问大佬要怎么清除这个副作用呢

Answer 1

EffectCallback可以返回一个清除函数，卸载的时候执行

function read() {setPicUrl...}
....
useEffect(()=>{
var reader = ...
reader.addEventListener('loadend',read)
...
return ()=>{
        reader.removeEventListener('loadend',read)
      }

},[])

Answer 2

onloadend 放在函数参数（回调）处理

Answer 3

不知道你是用的是react 那个版本
如果是用的是支持hooks版本的react,你可以这样使用useEffect 通过返回一个函数在页面卸载的时候执行

 useEffect(()=> {
   // 执行你的副作用
   // 比如

   window.addEventListener
   return () => {
     // 你想清除的副作用代码
     // 比如
     window.removeEventListener
   }   
 }, [])

如果是老版本的react,只需要在加载跟卸载生命周期内完成就行。