反应原生 useEffect 清理未正确使用更新的状态

Question

我一直在为清理 useEffect 的 function 期间发生的一些奇怪的事情摸不着头脑。 基本上，在清理代码中，我调用 updateStore() function 以根据 changeFlag 的 boolean 值更新存储。 但是，updateStore() 甚至清理 function 本身都没有反映 changeFlag 的更新 state ，我不知道为什么。

我试图在一个干净的项目上做一个简单的 POC，认为它可能是由我的项目的一些错误引起的，但它仍然有同样的问题。

应用程序.js

import React, {useState, useEffect} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';



const Test = ({navigation}) => {
  //const { id } = route.params;
  const [changeFlag, setChangeFlag] = useState(false);
  useEffect(() => {
      console.log(`Start: ${changeFlag}`);
      return function cleanup () {
          console.log(`Exiting: ${changeFlag}`);
          updateStore();
      };
  }, []);

  useEffect(() => {
    console.log(`Flag changed! ${changeFlag}`);
  }) 

  const toggle = () => {
      setChangeFlag(!changeFlag);
  }

  const updateStore = () => {
    console.log(`Print flag ${changeFlag}`);
  }

  return (
      <View style={styles.container}>
          <Text>{changeFlag ? "True" : "False"} </Text>
          <Button title={"Press toggle"} onPress={toggle}/>
      </View>
  );
}

const Home = ({navigation}) => {
  return(
    <View>
      <Button title={"Go Test"} onPress={() => navigation.navigate('Test')}/>
    </View>
  );
}

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Test" component={Test} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App

Output

Start: false
Flag changed! false
Flag changed! true
Exiting: false
Print flag false

提前致谢！

Answer 1

如果您想在changeFlag中访问 c useEffect的新值，则需要将其放在useEffect末尾的[]中，这样做就是说useEffect来跟踪更新的值

useEffect(() => {
  console.log(`Start: ${changeFlag}`);
  return function cleanup () {
      console.log(`Exiting: ${changeFlag}`);
      updateStore();
  };
}, [changeFlag]);