首页 > 解决方案 > useState 在开关 onValueChange 上落后一步

问题描述

所以我正在渲染一个必须切换值的开关

const [useBioAuth, setUseBioAuth] = useState<boolean>(false);

这是我的开关

 <Switch
     onValueChange={toggleSwitch}
     trackColor={{ true: colors.secondary }}
     thumbColor={colors.input.bg.normal}
     style={style.marginT10}
     value={useBioAuth}
  />

这是我的 toggleSwitch 功能

const toggleSwitch = useCallback(() => {
    setUseBioAuth(!useBioAuth);
    console.log('toggle '+ useBioAuth)
    _storeData();
  }, [_storeData, useBioAuth]);

  const _storeData = useCallback(async () => {
    try {
      await AsyncStorage.setItem('useBioAuth', JSON.stringify(useBioAuth));
      if (!useBioAuth) {
        await AsyncStorage.removeItem('useBioAuth');
      }
    } catch (error) {
      //TODO
    }
  }, [useBioAuth]);

但是状态总是比切换落后一步控制台日志在它应该为假时显示为真,反之亦然

请问有什么想法吗?谢谢你

标签: react-nativereact-hooksuse-state

解决方案


您可以使用函数而不是setState. 所以试试这个: 在此处输入图像描述


推荐阅读