为什么 state 没有改变

Question

我有以下function，有两个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])