如何仅使用 React Native 中的 if 语句返回 useEffect

Posted 2023-02-16

【中文标题】如何仅使用 React Native 中的 if 语句返回 useEffect

【英文标题】：How to return a useEffect with only if statements in React Native

【发布时间】：2021-08-25 09:05:45

【问题描述】：

当我进入页面时，我正在使用 useEffect 来定义变量值，但有时我会收到以下警告：

警告：无法对未安装的组件执行 React 状态更新。 这是一个空操作，但它表明您的应用程序中存在内存泄漏。 要修复，请取消 useEffect 中的所有订阅和异步任务 清理功能。

这是我的 useEffect 函数代码：

useEffect(() => 
        if(hierarchy == '1')
            setJob('Investigador')
        
        if(hierarchy == '2')
            setJob('Administrador')
        
        if(hierarchy == '0')
            setJob('Novo Utilizador')
        
, [])

我知道我应该在函数中返回一些东西来清理它，但由于我只使用 if 而不是 const，我怎样才能返回才能没有这个错误？

【参考方案1】：

在应用中设置状态时，您应该使用清理功能。 考虑使用'mounted' 变量来判断它是否应该跳过对 setState 的调用。

    import React,  useEffect, useState, useRef  from "react";
    
    //inside component:
    const mounted = useRef(true);
    useEffect(() => 
    mounted.current = true;
     if (mounted.current) 
            if(hierarchy == '1')
                setJob('Investigador')
            
            if(hierarchy == '2')
                setJob('Administrador')
            
            if(hierarchy == '0')
                setJob('Novo Utilizador')
            
    
     return () => (mounted.current = false);
    , [])

【讨论】：

我可以将它用于每个类似的 useEffect 函数吗？

是的，你可以用这个！

请查看更新后的答案。我忘了加if (mounted.current)