Javascript 如何解决；can'；t对未安装的组件执行react状态更新“；

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

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

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

口袋妖怪 口袋妖怪

const renderItem=（{item}）=>(
{
导航。导航（“神奇宝贝详细信息”{
url:item.url，
});
}}
>
);

---

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

一种方法似乎是维护一个变量，以查看组件是否仍在安装，这让我感觉很难闻（）-但无论如何，我会在您的代码中看到它

   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;
    }
  }, []);

试试这个

React.useffect（（）=>{
（异步函数onMount（）{
等待获取（url）
.然后（（res）=>res.json（））
。然后（（数据）=>setData（数据））；
setReady（真）；
})();
}, []);与前面提到的类似，关键点是将状态更新
setReady（）
包装在
if（mounted）{}
块中

创建局部变量以表示初始装载状态
let mounted=true在您的效果中具有异步调用

使用清除效果将mounted设置为false
return（）=>{mounted=false}
用
if（mounted）{setState（…）}包装setState调用

如果您删除
| | true
调用并刷新，您将看到mem leak的错误消失。
这正是他所做的，您刚刚将
getData
函数移动到有效范围内，但错误仍然存在。
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>
  );

   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;
    }
  }, []);

useEffect(() => {
  let mounted = true;
  const apiRequest = async (setReady) => {
     let response;
     try {
        response = await APICall();
        if (mounted) {
          setReady(response.data);
        }
     } catch (error) {}
  }
  apiRequest();
  return () => { mounted = false;}
})