使用上下文和钩子更新未装载组件的状态-本地反应

Question

更新：我已经在这篇文章中应用了讲师，但即使使用状态isMounted和useEffect清理功能，我仍然无法解决这个问题。代码似乎运行良好，但我总是收到这个警告。

我有一个应用程序组件，它通过条件呈现管理两个页面的导航，如果我登录了，我会输入一个，如果我没有登录，我会进入另一个。

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子组件。一旦用户输入了正确的凭据，我就可以使用上下文来更新isLoggedIn状态。问题是，当卸载应用程序组件时，状态会更新，这会导致no-op。

我收到以下警告："无法对未安装的组件执行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>
);
}

登录后的家庭餐具室组件：

export default function HomePantry() {
return (
<View>
<Text> My pantry </Text>
</View>
);
}

Answer 1

问题是在promise上设置状态时。该组件是在承诺得到解决之前安装的，因此您只需要检查它是否仍在安装；

useEffect(() => {
let isMounted = true;
let store = async () => {
let accessToken = await SecureStore.getItemAsync("accessToken");
if(accessToken && isMounted){
setLoggedIn(true)
}
}
store().then()
return () => {
isMounted = false;
};
},[]);