React Native中AsyncStorage与UI不同步，如何调整该异常行为？

• 核心问题出在toggleSwitch的执行逻辑顺序错误：你在存储状态时写入的是未更新的旧值，之后才修改本地状态。比如当前isEnabled为true时点击开关，代码会先把旧值true写入AsyncStorage，再将状态更新为false，就会出现UI已经变成关闭状态，但Storage里还是旧的开启值的情况。
• React的状态更新是异步批量处理的，就算你调换顺序先执行setIsEnabled，也无法在同一个函数作用域内拿到更新后的新值，直接存储还是会拿到旧值。

直接提前计算好要切换的目标新值，先把新值写入AsyncStorage，再更新本地状态即可，修改后的toggleSwitch代码如下：

const toggleSwitch = async () => {
  // 先计算最终要切换的目标状态
  const newEnableStatus = !isEnabled;
  // 存储新状态到AsyncStorage
  await AsyncStorage.setItem('enableBiometric', newEnableStatus.toString());
  // 更新本地状态触发UI刷新
  setIsEnabled(newEnableStatus);
};

修改后存储的值和UI状态完全对应，不会再出现不同步的问题。

内容的提问来源于stack exchange，提问作者Kerry