React 原生 useEffect 清理功能

Question

我收到类似警告 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

我正在使用此代码进行 useEffect 清理，但我仍然收到相同的警告。

useEffect(() => {
        let isMounted = true;
        
        if (isMounted) {
            displayData();
        }
        
        return () => { isMounted = false };
    }, []);

const displayData = async () => {
        try {
            let userToken = await AsyncStorage.getItem('userToken');
            setToken(userToken);
        }
        catch (error) {
            //console.log(error);
        }
}

有什么办法吗？

Answer 1

你的警告是Can't perform a React state update on an unmounted component.

因为AsyncStorage.getItem 是异步的，所以有可能在它解析为一个值时组件已经被卸载。

如果您尝试使用 AsyncStorage.getItem 解析的值设置组件的状态（并且在组件已被卸载后发生），您会收到此警告。

AsyncStorage.getItem貌似没有取消机制，所以要注意异步AsyncStorage.getItem解析值后的后续状态设置。

import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [token, setToken] = useState('');

  useEffect(() => {
    let isMounted = true;

    const displayData = async () => {
      try {
        let userToken = await AsyncStorage.getItem('userToken');
        if (isMounted) {
          setToken(userToken);
        }
      } catch (error) {
      //console.log(error);
      }
    };


    displayData();

    return () => {
      isMounted = false;
    };
  }, []);

  return (
    <>...</>
  );
}

Snack