You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native使用Context和Hooks时卸载组件更新状态告警求助

**更新:**我已经按照相关方案做了调整,但即便使用isMounted状态和useEffect清理函数,仍未解决该问题。代码运行表现正常,但我始终收到这条告警。

我有一个App组件,通过条件渲染管理两个页面的导航,用户登录后进入对应页面,未登录则进入另一个页面。

import {context} from "./components/context"

const Stack = createNativeStackNavigator();

export default function App() {
    const [isLoggedIn, setLoggedIn] = useState(false);

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

        let store = async () => {
            await SecureStore.deleteItemAsync("accessToken")
            let accessToken = await SecureStore.getItemAsync("accessToken");
            if(accessToken && isMounted) {
                setLoggedIn(true)
            }
        }
        store().then()

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

    return (
        <>
            <NavigationContainer>
                <context.Provider value={{isLoggedIn, setLoggedIn}}>
                    <Stack.Navigator >
                        <Stack.Screen name={isLoggedIn ? "HomePantry" : "Home"} component={isLoggedIn? HomePantry : Home}  />
                    </Stack.Navigator>
                </context.Provider>
            </NavigationContainer>
        </>
    );
}

我的context.js文件代码如下:

export const context = React.createContext({});

以下是我的简单首页组件(用户登录前展示):

export default function Home({navigation}) {

    return (
            <View>
                <Text> My pantry </Text>
                <UserLogin />
            </View>
    );
}

以下是UserLogin子组件,我使用Context实现用户输入正确凭证后更新isLoggedIn状态。问题是状态更新时App组件已经卸载,导致无效操作。

我收到的告警内容为:

Can't perform a React state update on an unmounted component - memory leak?
(无法对已卸载的组件执行React状态更新,是否存在内存泄漏?)

我目前还没能解决这个问题,如有相关思路欢迎告知,提前感谢大家。

import {context} from "./context";

export default function UserLogin() {
    const contest = React.useContext(context)

    return (
        <View style={styles.inputsContainer}>
            <Formik
                initialValues={{ email: '', password: '' }}
                onSubmit={
                    async (values, actions) => {
                        if(values.email.trim() !== "" && values.password.trim() !== ""){
                            const response = await fetch('https://lam21.iot-prism-lab.cs.unibo.it/auth/login', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({
                                    email: values.email,
                                    password: values.password
                                })
                            });
                            let json = await response.json()
                            if(json.accessToken){
                                contest.setLoggedIn(true)
                                await SecureStore.setItemAsync("accessToken", json.accessToken);
                                actions.resetForm({})
                            } else {
                                alert("Username o password sbagliati!")
                            }
                        }}}
            >
                {({ handleChange, handleBlur, handleSubmit, values }) => (
                    <View style={styles.inputsContainer}>
                        <Text style={styles.labelText}> Email </Text>
                        <TextInput
                            required
                            onChangeText={handleChange('email')}
                            onBlur={handleBlur('email')}
                            value={values.email}
                            placeholder={"Inserisci la tua mail.."}
                            style={styles.inputText}
                        />
                        <Text style={styles.labelText}> Password </Text>
                        <TextInput
                            required
                            onChangeText={handleChange('password')}
                            onBlur={handleBlur('password')}
                            value={values.password}
                            placeholder={"Inserisci la tua password.."}
                            style={styles.inputText}
                        />
                        <View style={styles.inputButton}>
                            <Button onPress={handleSubmit} title="Submit" color="purple" style={styles.inputButton} />
                        </View>
                    </View>
                )}
            </Formik>
        </View>
    );
}

登录后的HomePantry组件代码如下:

export default function HomePantry() {

    return (
        <View>
            <Text> My pantry </Text>
        </View>
    );
}

内容的提问来源于stack exchange,提问作者user17224304

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.29 11:54:06