React Native：异步存储setItem导致应用崩溃

问题描述

感谢您花一些时间阅读我的帖子！

我要做什么： 我想保存我的运动计数。知道如何使用异步设置/获取/删除另一个值也很有趣。

正在发生的事情： 当我按下按钮以保存它（setItem）或时，当我在useEffect中调用save（）时，它使我的应用程序崩溃，另一方面getItem和removeItem正常运行！

我所做的事情： 我确实尝试过在save函数中使用JSON.stringify（exerciseCount），但是它只能工作一次，而且如果再次按下它，它也会一直覆盖在“”中。

我注释掉的注释只是我也试图获得另一个价值，但我不确定异步将如何工作，因此，如果有人也有一些提示，那将是很棒的！

我的代码：

import React,{ useContext,useState,useEffect } from "react";
import {
  StyleSheet,Text,View,Image,AsyncStorage,TouchableOpacity,} from "react-native";
import { ExerciseContext } from "../components/ExerciseContext";

import { AntDesign } from "@expo/vector-icons";
import { Colors } from "../colors/Colors";
//import { TouchableOpacity } from "react-native-gesture-handler";

export default function StatsScreen() {
  const [exerciseCount,setExerciseCount] = useContext(ExerciseContext);
  //const [workoutCount,setWorkoutCount] = useContext(ExerciseContext);

  const save = async () => {
    try {
      await AsyncStorage.setItem("MyExerciseCount",exerciseCount );
      //await AsyncStorage.setItem("MyWorkoutCount",workoutCount);
    } catch (err) {
      alert(err);
    }
  };

  const load = async () => {
    try {
      let exerciseCount = await AsyncStorage.getItem("MyExerciseCount");
      //let workoutCount = await AsyncStorage.getItem("MyWorkoutCount");

      if (exerciseCount !== null) {
        setExerciseCount(exerciseCount);
      }
      // if (workoutCount !== null) {
      //   setWorkoutCount(workoutCount);
      // }
    } catch (err) {
      alert(err);
    }
  };

  const remove = async () => {
    try {
      await AsyncStorage.removeItem("MyExerciseCount");
    } catch (err) {
      alert(err);
    } finally {
      setExerciseCount(0);
    }
  };

  useEffect(() => {
    load();
    //save();
  },[]);

  return (
    <View style={styles.container}>
      <Image
        source={require("../../assets/mindfulness.png")}
        style={{ width: "100%",height: 200,marginTop: 14 }}
        resizeMode="contain"
      />
      <View style={styles.cardWide}>
        <AntDesign
          style={styles.iconOne}
          name="Trophy"
          size={24}
          color="white"
        />
        <Text style={styles.headerOne}>Exercises Completed:</Text>
        <Text style={styles.exerciseNumber}> {exerciseCount}</Text>
        <TouchableOpacity style={styles.save} onPress={() => save()}>
          <Text style={{ color: "white",fontWeight: "bold" }}>Save</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.remove} onPress={() => remove()}>
          <Text style={{ color: "white",fontWeight: "bold" }}>Restart</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.cardWide}>
        <AntDesign
          style={styles.iconOne}
          name="staro"
          size={24}
          color="white"
        />
        <Text style={styles.headerOne}>Workouts Completed:</Text>
        <Text style={styles.exerciseNumber}> {exerciseCount}</Text>
        <TouchableOpacity style={styles.remove} onPress={() => remove()}>
          <Text style={{ color: "white",fontWeight: "bold" }}>Restart</Text>
        </TouchableOpacity>
      </View>
      {/* <TouchableOpacity onPress={() => save()}>
        <Text>Save</Text>
      </TouchableOpacity> */}
    </View>
  );
}

const styles = StyleSheet.create({})

如果您对下面的锻炼情境感到好奇：

import React,{ useState,createContext } from "react";

const ExerciseContext = createContext([{},() => {}]);

const ExerciseProvider = (props) => {
  const [state,setState] = useState(0);
  //{ exerciseCount: 0,workoutCount: 0 }

  return (
    <ExerciseContext.Provider value={[state,setState]}>
      {props.children}
    </ExerciseContext.Provider>
  );
};

export { ExerciseContext,ExerciseProvider };

再次感谢任何可以提供帮助的人！ Jack。

解决方法

当您在 AsyncStorage 中设置的数据不是字符串时，可能会发生这种情况。 请记住，如果要保存对象，请在要使用它时使用 JSON.stringify 和 JSON.parse。 还可以使用 typeof YOURDATA

确认您保存到异步存储中的数据类型