AsyncStorage not functioning, errors and database input buttons freezing-CodePudding

So, I am currently working on a program that is supposed to be a mock-up of a Student Educational Plan for a school. The basic gist of it is that it displays a home page with buttons to a form to submit information (text input has buttons to submit or clear the information entered into the to an AsyncStorage database and a page that displays reports of information collected from the form. All pages display somewhat normally, but for some reason, when I press the submit button, the page freezes and does not submit the info. Here is the code I have as of right now. I am stuck trying to figure out how to use AsyncStorage in the context, which is why I don't have it added here. Another thing to add is that the names in the StyleSheet are the way they are is because I had originally based the code from a previous program (mock-up Music Player) I had worked on. Please explain everything as simply as possible.

import React from 'react';
import { Image, ScrollView, StyleSheet, Text, View, Button, TextInput} from 'react-native';
import {AsyncStorage} from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Welcome' }}
        />
        <Stack.Screen name="SEP Form" component={SEPScreen} />
        <Stack.Screen name="SEP Database" component={SEPInfo} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const HomeScreen = ({ navigation }) => {
  return (
    
    <View style={styles.container}>
    <Button
      title="Your Student Educational Plan"
      onPress={() =>
        navigation.navigate('SEP Form')
      }
    />
    <Button
      title="All Student Educational Plans"
      onPress={() =>
        navigation.navigate('SEP Database')
      }
    />
    </View>
  );
};


const SEPScreen = ({ navigation, route }) => {
  return (
    <View style={styles.container}>
  <Text style={styles.sectionTitle}>Enter your info here:</Text>

<TextInput style={styles.input} name="name" label="StudentName " placeholder="Name" />
<TextInput style={styles.input} name="id" label="StudentID " placeholder="ID" />
<TextInput style={styles.input} name="major" label="Major " placeholder="Major" />
<TextInput style={styles.input} name="goal" label="Goal " placeholder="Goal" />
  <Button title="Submit"
  onPress={() => AsyncStorage.setItem(TextInput)
  }
    ></Button>
  <Button title="Clear"
  onPress={() => AsyncStorage.clear(TextInput)
  }
  ></Button>
 </View>
  );
};

const SEPInfo = ({navigation, route}) => {
  return(
<View style={styles.container}>
<Text style={styles.sectionTitle}>SEP Database</Text>
</View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#CFEAF1'
  },
  listWrapper: {paddingTop: 80, paddingHorizontal: 20},
  sectionTitle: {fontWeight: 'bold', fontSize: 30, margin: 5, color: '#2E2090', alignSelf: 'center'},
  sectionTitleTwo: {fontWeight: 'bold', fontSize: 25, margin: 5, color: '#206290', alignSelf: 'center'},
  flexContainerWaiting: {backgroundColor: '#20BD57', padding: 15, borderRadius: 10, flexDirection: 'row', alignItems: 'center', marginTop: 5, marginBottom: 5, justifyContent: 'space-evenly'},
  flexContainerOne: {backgroundColor: '#0B97B0', fontSize: 16, flex: 0.5, padding: 15, borderRadius: 10, flexDirection: 'row', alignItems: 'center', marginTop: 2.5, marginBottom: 2.5, justifyContent: 'space-evenly'},
  flexContainerTwo: {backgroundColor: '#D773EB', fontSize: 16, flex: 0.5, padding: 15, borderRadius: 10, flexDirection: 'row', alignItems: 'center', marginTop: 2.5, marginBottom: 2.5, justifyContent: 'space-evenly'},
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default MyStack;

CodePudding user response：

Looking at the AsyncStorage docs (https://reactnative.dev/docs/asyncstorage#setitem), it says that when using setItem(), you need to pass a key: string and a value: string. In your code, you only seem to pass a value: AsyncStorage.setItem(TextInput). Furthermore, you pass the value TextInput into setItem(), but you don't seem to define TextInput anywhere. What you should do is use the value prop and onChangeText prop to store the value of the TextInput in a state variable, as is shown on the docs: https://reactnative.dev/docs/textinput. Then, pass that state variable into setItem() as they value and pass another item as its key.

CodePudding user response：

for saving an item in async storage:-

AsyncStorage.setItem('usertoken', token);

for fetching an item from async storage:-

// need to be called inside an async function
  let token = await AsyncStorage.getItem('userToken');