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
相关产品推荐
相关产品推荐

