Javascript React Native:异步存储setItem导致应用程序崩溃

谢谢你花时间阅读我的帖子

我想做什么： 我想保存我的练习计数。了解如何使用async设置/获取/删除另一个值也很有趣

发生了什么： 当我按下按钮保存它（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，{useContext，useState，useffect}来自“React”；
进口{
样式表，
文本，
看法
形象,，
异步存储，
可触摸不透明度，
}从“反应本族语”；
从“./components/ExerciseContext”导入{ExerciseContext}；
从“@expo/vector icons”导入{AntDesign}”；
从“./Colors/Colors”导入{Colors}；
//从“反应本机手势处理程序”导入{TouchableOpacity}；
导出默认函数StatsScreen（）{
const[exerciseCount，setExerciseCount]=useContext（ExerciseContext）；
//const[workoutCount，setWorkoutCount]=useContext（ExerciseContext）；
const save=async（）=>{
试一试{
wait AsyncStorage.setItem（“MyExerciseCount”，exerciseCount）；
//等待AsyncStorage.setItem（“MyWorkoutCount”，workoutCount）；
}捕捉（错误）{
警惕（err）；
}
};
const load=async（）=>{
试一试{
让exerciseCount=Wait AsyncStorage.getItem（“MyExerciseCount”）；
//let workoutCount=wait AsyncStorage.getItem（“MyWorkoutCount”）；
if（exerciseCount！==null）{
setExerciseCount（exerciseCount）；
}
//如果（workoutCount！==null）{
//setWorkoutCount（workoutCount）；
// }
}捕捉（错误）{
警惕（err）；
}
};
const remove=async（）=>{
试一试{
等待AsyncStorage.removeItem（“MyExerciseCount”）；
}捕捉（错误）{
警惕（err）；
}最后{
setExerciseCount（0）；
}
};
useffect（（）=>{
加载（）；
//save（）；
}, []);
返回(
已完成的练习：
{exerciseCount}
save（）}>
拯救
删除（）}>
重新启动
完成的训练：
{exerciseCount}
删除（）}>
重新启动
{/*save（）}>
拯救
*/}
);
}
constyles=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 };

import React，{useState，createContext}来自“React”；
const ExerciseContext=createContext（[{}，（）=>{}]）；
const ExerciseProvider=（道具）=>{
const[state，setState]=useState（0）；
//{exerciseCount:0，workoutCount:0}
返回(
{props.children}
);
};
导出{ExerciseContext，ExerciseProvider}；

---

再次感谢所有能够提供帮助的人Jack。

当您在异步存储器中设置的数据不是字符串时，可能会发生这种情况。 记住，如果要保存对象，请在需要使用时使用

JSON.stringify

和

JSON.parse

。

---

还可以通过使用

typeofyourdata

确认保存到异步存储中的数据类型。如果在异步存储中设置的数据不是字符串，则可能会发生这种情况。 记住，如果要保存对象，请在需要使用时使用

JSON.stringify

和

JSON.parse

。 还可以通过使用

typeofyourdata