React Native: setItem асинхронного хранилища вызывает сбой приложения

Спасибо, что уделили время моему сообщению!

Что я хочу сделать: я хочу сохранить свой список упражнений. Также было бы интересно узнать, как я могу установить/получить/удалить другое значение с помощью async.

Что происходит: когда я нажимаю кнопку, чтобы сохранить его (setItem) или, когда я вызываю save() в useEffect, это приводит к сбою моего приложения, getItem и removeItem на другая рука работает отлично!

Что я сделал: я попытался использовать 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 };

Еще раз спасибо всем, кто может помочь! Джек.