为什么状态没有改变

Question

我有以下功能，有两个Alerts。第一个 Alert 显示 settingsChangedRoute 是 true，所以在 setSettingsChanged(settingsChangedRoute) 之后；据我了解，settingsChanged 值也应该为真。但这是错误的，我不明白为什么。请帮助修复它，因为它应该是 true.

const [settingsChanged, setSettingsChanged] = useState(false);
//...
const load = async () => {
    if (!!(route?.params)) {
      const settingsChangedRoute = route.params.settingsChanged;
      Alert.alert(`settingsChangedRoute === ${settingsChangedRoute}`);
      setSettingsChanged(settingsChangedRoute);
    }
    const savedMode = await AsyncStorage.getItem('mode');
    if (!!savedMode) {
      const savedBlocked = await AsyncStorage.getItem('blocked');
      if (savedBlocked) {
        setBlocked(JSON.parse(savedBlocked));
      }
      setMode(savedMode);
      const savedTurn = await AsyncStorage.getItem('turn');
      setTurn(savedTurn);
      const savedFieldSize = await AsyncStorage.getItem('fieldSize');
      const parcedFieldSize = JSON.parse(savedFieldSize);
      setFieldSize(parcedFieldSize);
      const savedDifficulty = await AsyncStorage.getItem('difficulty');
      setDifficulty(savedDifficulty);
      Alert.alert(`settingsChanged === ${settingsChanged}`);
      if (settingsChanged) {
        setInitialFieldState();
        setSettingsChanged(false);
      } else {
        const fieldStateJSON = await AsyncStorage.getItem('fieldState');
        if (!!fieldStateJSON) {
          setFieldState(JSON.parse(fieldStateJSON));
        }
      }
    } else {
      setInitialFieldState();
    }
  }

Answer 1

useState() 挂钩异步更新值。因此，即使您在代码执行到达第二个警报时将 settingsChanged 更新为 true，这些值仍未更改。因此，建议使用 useEffect 钩子。

参考这个文档： https://reactjs.org/docs/hooks-effect.html

useEffect(()=>{
   // write code that will execute after settingsChanged has been updated
},[settingsChanged])

如果你只需要在settingsChanged值更新为true时执行代码，你可以简单地在useEffect

中添加一个条件

useEffect(()=>{
   if(settingsChanged) {
            // write code that will execute after settingsChanged has been 
            // updated to true
   }
},[settingsChanged])

为什么状态没有改变

Why the state is not changed

javascript

react-native

use-state