React-Native Expo无法在localStorage中保存键值数据

Question

我有一个很难解决的情况，在我的情况下，我想使用将Item设置为localStorage

npm i @react-native-async-storage/async-storage

“1.23.1”

但是当我在应用程序 -> 本地存储中的键盘终端中使用“J”打开 DevTools 时，没有值和键设置，就好像什么也没发生一样，但我检查了控制台值，并且键已设置但未保存在 localStorage 中。

这是我使用的代码

import React, { useState } from "react";
import {
  View,
  Modal,
  StyleSheet,
  SafeAreaView,
  ScrollView,
} from "react-native";
import { ThemedView } from "@/components/ThemedView";
import { ThemedText } from "@/components/ThemedText";
import { ThemedButton } from "@/components/ThemedBtn";
import { ParamListBase, useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "react-native-screens/lib/typescript/native-stack/types";
import AsyncStorage from "@react-native-async-storage/async-storage";

const TermsAndPolicy = () => {
  const [modalVisible, setModalVisible] = useState(true);
  const navigation = useNavigation<NativeStackNavigationProp<ParamListBase>>();

  const handleAgree = async () => {
    try {
      await AsyncStorage.setItem('hasTermsAndPolicy', 'true');
      setModalVisible(false);
      navigation.navigate("OnboardingPage/OnboardingPage");
    } catch (error) {
      console.error("Failed to save the Terms and Policy status:", error);
    }
  };

  return (
    <ThemedView>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(false);
        }}
      >
        <View style={styles.centeredView}>
          <ThemedView style={styles.modalView}>
            <SafeAreaView>
              <ScrollView>
                <ThemedView style={styles.textTherms}>
                  <ThemedText type="title">Terms and Policy 1</ThemedText>
                  <ThemedText type="default">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Dolores cum asperiores facilis sapiente suscipit,
                    accusantium ea, ipsam, at sint neque veniam omnis
                    reprehenderit dolorem excepturi inventore rem. Vero maiores,
                    possimus inventore perspiciatis quaerat earum exercitationem
                    accusamus beatae dignissimos. Doloremque aut eligendi
                    quibusdam deleniti et voluptatum similique repellat
                    consequatur voluptate aliquid.
                  </ThemedText>
                </ThemedView>
                <ThemedView style={styles.textTherms}>
                  <ThemedText type="title">Terms and Policy 1</ThemedText>
                  <ThemedText type="default">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Dolores cum asperiores facilis sapiente suscipit,
                    accusantium ea, ipsam, at sint neque veniam omnis
                    reprehenderit dolorem excepturi inventore rem. 
                  </ThemedText>
                </ThemedView>
                <ThemedView style={styles.textTherms}>
                  <ThemedText type="title">Terms and Policy 3</ThemedText>
                  <ThemedText type="default">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Dolores cum asperiores facilis sapiente suscipit,
                    accusantium ea, ipsam, at sint neque veniam omnis
                    reprehenderit dolorem excepturi inventore rem. 
                  </ThemedText>
                </ThemedView>
                <ThemedView style={styles.footer}>
                  <ThemedButton title="Lanjutkan" onPress={handleAgree} />
                </ThemedView>
              </ScrollView>
            </SafeAreaView>
          </ThemedView>
        </View>
      </Modal>
    </ThemedView>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  modalView: {
    padding: 10,
    margin: 10,
    borderRadius: 10,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    height: 600,
  },
  textTherms: {
    marginTop: 10,
  },
  footer: {
    alignItems: "flex-start",
  },
});

export default TermsAndPolicy;

我写的代码正确吗？

Answer 1

数据保存在本地存储中，但不会显示在开发工具中。 你是对的，清理你的应用程序现金

const handleAgree = async () => {
try {
  await AsyncStorage.setItem('hasTermsAndPolicy', 'true');
  setModalVisible(false);
  navigation.navigate("OnboardingPage/OnboardingPage");
} catch (error) {
  console.error("Failed to save the Terms and Policy status:", error);
}

};