时间戳

首页 > 解决方案 > 如何解决“无法对未安装的组件执行反应状态更新”

javascript - 如何解决“无法对未安装的组件执行反应状态更新”

问题描述

无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。在 PokemonListItem（在 PokemonList.jsx:148）

好的，我知道这是一个常见问题，解决方案应该很简单。我只是不知道如何在我的代码中实现它。

我正在使用 React-Native 和 PokéAPI 制作一种用于移动设备的 Pokédex。我不确定泄漏在哪里，所以请有经验的开发人员提供帮助。

口袋妖怪列表项

export default function PokemonListItem({ url, Favorite }) {
  const [pokemondata, setData] = React.useState({});
  const [dataReady, setReady] = React.useState(false);
  const [isFavorite, setFavorite] = React.useState(false);

  const favoriteStatus = (bool) => {
    setFavorite(bool);
  };

  const getData = async () => {
    await fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));

    setReady(true);
  };

  React.useEffect(() => {
    getData();
  }, []);

  more code...

口袋妖怪列表

const renderItem = ({ item }) => (
    <TouchableHighlight
      style={{ borderRadius: 10 }}
      underlayColor="#ffc3c2"
      onPress={() => {
        navigation.navigate("Pokémon Details", {
          url: item.url,
        });
      }}
    >
      <PokemonListItem url={item.url} Favorite={FavoriteButton} />
    </TouchableHighlight>
  );

如果您需要查看完整代码，可以访问存储库。

标签： javascriptreactjsreact-native

解决方案

一种方法似乎是维护一个变量来查看组件是否仍然安装，这对我来说感觉很臭（React-hooks。无法对未安装的组件执行React状态更新） - 但无论如何这是我将如何在您的代码中看到它...

   let isMounted;

   const getData = async () => {
     await fetch(url)
      .then((res) => res.json())
      .then((data) => { if(isMounted) setData(data)});

     setReady(true);
  };

  React.useEffect(() => {
    isMounted = true;
    getData();
    return () => {
      isMounted = false;
    }
  }, []);

推荐阅读