React Native 异步存储与 UI 不同步？我怎样才能改变这种行为？

Question

您好我的组件中有一个切换开关，它将根据值 true or false

显示登录方法

如果为 true，登录图标将显示，如果为 false，则不显示。

在设置页面进行操作

所以我在设置页面做了一个切换按钮。我正在使用异步存储，因为无论用户是否打开按钮，我都想保存数据。

这里是设置页面的内容

const toggleSwitch = async () => {
        await AsyncStorage.setItem('enableBiometric', isEnabled.toString());
        setIsEnabled(!isEnabled);
};

const printSomething = async () => {
        try {
            const value = await AsyncStorage.getItem('enableBiometric');
            console.log(value);
        } catch (err) {
            console.log(err);
        }
    };

return (
         <View>
             <View style={styles.button}>
                    <Text>Turn on Biometric Login</Text>
                    <Switch
                        trackColor={{false: switchDefaultColor, true: primaryColor}}
                        thumbColor={isEnabled ? '#ffffff' : '#f4f3f4'}
                        ios_backgroundColor={switchDefaultColor}
                        onValueChange={toggleSwitch}
                        value={isEnabled}
                    />
                </View>

          <TouchableOpacity onPress={() => printSomething()}>
                <Text>Text</Text>
                {isEnabled ? <Text>Enabled</Text> : <Text>DisEnabled</Text>}
            </TouchableOpacity>
      </View>
)

加载组件时，按钮状态的先前状态从异步存储中加载。

但在拨动开关的前 2 或 3 次期间。只有 <Text>Enabled</Text> or <Text>DisEnabled</Text> 的 Ui 变化。存储数据不会改变。

例如场景

当组件加载时，应用程序从存储中获取数据。开关是on。当我按下 printSomething 按钮时，它会说 on.

当我第一次按下开关时。开关 UI 将关闭。但是当我按下 printSomething 按钮时，它仍然会 on.

它总是会发生。

Answer 1

enableBiometric 需要先从 AsyncStorage 加载，然后渲染 ui
在 toggleSwitch 函数中，isEnabled 值对于 setIsEnabled 和 AsyncStorage.setItem
需要相同

FYI:

https://snack.expo.dev/@hashtd/cranky-milkshake

React Native 异步存储与 UI 不同步？我怎样才能改变这种行为？

React Native Async storage is not in sync with the UI? How can I change this behavior?

javascript

asynchronous

android-asynctask

reactjs

react-native