首页 > 解决方案 > React Native:如何防止在未挂载的组件上更新状态导致的内存泄漏。状态在收到api响应后更新?

问题描述

下面的解决方案实际上是在防止 react-native App 上的内存泄漏还是只是隐藏警告?

除了下面的解决方案之外,是否还有其他解决方案可以解决此问题。

我找到了一种防止 API 响应状态更新的方法。通过使用 useRef 如下

const _isMounted = useRef(true); // Initial value _isMounted = true
  
useEffect(() => {
       _isMounted.current = true;
       return () => {
           _isMounted.current = false;
       }
}, []);

const onResponse = () => {
  if (_isMounted.current) {
     setResponse(data);
  }
}

有没有其他解决方案来解决这个问题?我使用 redux-saga 来处理 API。

在 redux-saga 中,我传递了一个回调。该代码给我一个警告状态在卸载后更新

 const [isSubmitting, setSubmitting] = useState(false); // this state is used to disable submit button and show loader

 props.saveData({
    token: props.login_token,
    setSubmitting: setSubmitting,
    data: data 
 });

解决方案

 props.saveData({
    token: props.login_token,
    setSubmitting: (flag)=>{
                        if(_isMounted.current){
                            setSubmitting(flag);
                        }
                    },
    data: data
     });

我发现的另一个解决方案是取消 Axios,但我不想取消 POST 操作。

标签: reactjsreact-nativeaxiosredux-saga

解决方案


推荐阅读