为什么状态没有改变答案

【问题标题】：Why the state is not changed为什么状态没有改变
【发布时间】：2022-01-01 10:13:05
【问题描述】：

我有以下功能，并且有两个警报。第一个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();
    }
  }

【问题讨论】：

标签： javascript react-native use-state

【解决方案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])

【讨论】：

成功了，谢谢！