reactjs - useEffect：无法对未安装的组件执行 React 状态更新。这是一个无操作，但它表明您的应用程序中存在内存泄漏

Question

嗨，当我将 APK 版本从 28 更新到 29 时，我的 react native expo 应用程序出现问题 - 因为谷歌播放了新的更新。

在下面的错误日志中指定的组件中的依赖关系更新后，这是我的错误：

Warning: 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 %s.%s, a useEffect cleanup function

我不确定问题出在代码的确切位置

带有 useEffect 清理尝试的代码：

//React Deps
import React, { useState, useEffect, useCallback } from "react";
import {
  View,
  StyleSheet,
  Image,
  Text,
  Platform,
  Button,
  ActivityIndicator,
} from "react-native";
import { SearchBar } from "react-native-elements";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import { useSelector, useDispatch } from "react-redux";

//Components
import HeaderButton from "../components/HeaderButton";
import JokesList from "../components/JokesList";

//Misc
import Colors from "../constants/Colors";

//Store
import * as jokeAction from "../store/actions/jokes-action";

const HomeScreen = (props) => {
const jokes = useSelector((state) => state.jokes.jokes);

const [search, setIsSearch] = useState(""); //Search
const [newSearch, setIsNewSearch] = useState([]); //New Search

const [isFetching, setIsFetchingFav] = useState(false); //Fav
const [isLoading, setIsLoading] = useState(); //Loading
const [isRefreshing, setIsRefreshing] = useState(false); //Refreshing
const [error, setError] = useState(""); //Errors

const dispatch = useDispatch();

//Load Jokes 
useEffect(() => {
  let isCancelled = false; //attempt

  console.log("load jokes");
  setIsLoading(true);
  loadJokes().then(() => {
    if (!isCancelled) {
      setIsLoading(false);
      console.log("set is loading to false");
    }
  });

  //Cleanup ?
  return () => {
    isCancelled = true;
  };
}, [dispatch, loadJokes]); //Deps

//Loading All Jokes
const loadJokes = useCallback(async () => {
  console.log("enter load jokes func");
  setError(null);
  setIsRefreshing(true);
  try {
    await dispatch(jokeAction.fetchJokes());
  } catch (err) {
    setError(err.message);
    console.log("error");
  }
  setIsRefreshing(false);
}, [dispatch, setIsLoading, setError]);

//Update after render
useEffect(() => {
  console.log("update after render");
  const willFocusSub = props.navigation.addListener("willFocus", loadJokes);
  return () => {
    willFocusSub.remove();
  };
}, [loadJokes]);

//Load Fav Jokes
useEffect(() => {
  console.log("load fav jokes");
  fetchingFavJokes();
}, [dispatch, fetchingFavJokes]);

//Favs
const fetchingFavJokes = useCallback(async () => {
  setError(null);
  try {
    await dispatch(jokeAction.loadFavJokes());
  } catch (err) {
    setError(err.message);
  }
  setIsFetchingFav(false);
}, [dispatch, setIsFetchingFav, setError]);

//Events
const updateSearch = (text) => {
  setIsSearch(text.toUpperCase());
  const newData = jokes.filter((joke) => {
    /* When no search text present, do not apply filtering */
    if (!text) {
      return true;
    }
    return (
      typeof joke.title.toUpperCase() === "string" &&
      joke.title.toUpperCase().includes(text.toUpperCase())
    );
  });
  setIsNewSearch(newData);
};

//Loading Spinner
if (isLoading) {
  return (
    <View style={{ ...styles.screen, ...styles.centered }}>
      <ActivityIndicator size="large" color="white" />
    </View>
  );
}

//Error
if (error) {
  return (
    <View style={{ ...styles.screen, ...styles.centered }}>
      <Text style={{ color: "white" }}>An Error Occurred!</Text>
      <Button
        title="Try Again"
        onPress={loadJokes}
        color={Colors.accentColor}
      />
    </View>
  );
}

//Fall Back Text
if (!isLoading && jokes.length === 0) {
  return (
    <View style={styles.centered}>
      <Text>No Jokes Found</Text>
    </View>
  );
}

return (
  //Logo
  <View style={styles.screen}>
    <View style={styles.logoContainer}>
      <Image style={styles.logo} source={require("../assets/logo.png")} />
    </View>
    <View style={styles.searchBar}>
      <SearchBar
        containerStyle={{
          backgroundColor: "white",
          borderTopColor: "white",
          borderBottomColor: "white",
          height: 50,
          alignItems: "center",
          justifyContent: "center",
        }}
        inputContainerStyle={{ backgroundColor: "white", height: 40 }}
        inputStyle={{
          backgroundColor: "white",
          color: "#232323",
          fontSize: 16,
          fontFamily: "luckiest-guy",
        }}
        lightTheme
        leftIconContainerStyle={{ backgroundColor: "white" }}
        searchIcon={{ size: 24 }}
        onChangeText={(text) => {
          updateSearch(text);
        }}
        onClear={(text) => setIsSearch("")}
        placeholder="Keyword or Topic..."
        value={search}
      />
      </View>
      <JokesList
        listData={!search ? jokes : newSearch}
        onRefreshing={loadJokes}
        isRefreshing={isRefreshing}
        navigation={props.navigation}
      />
   </View>
 );
};

...Navigation/Styles etc
export default HomeScreen;

标签： reactjsreact-nativeexpouse-effect