Блог

Главная - Вопросы по программированию - AsyncStorage не сохраняет данные и впоследствии не извлекает данные

AsyncStorage не сохраняет данные и впоследствии не извлекает данные

#reactjs #react-native #use-state #asyncstorage

#reactjs #реагировать-родной #состояние использования #asyncstorage

Вопрос:

Я использую expo и react-native Я пытаюсь использовать AsyncStorage для сохранения 3 значений в постоянном хранилище, чтобы я мог получить его из любого места в приложении, но asyncstorage не сохраняет и не извлекает,

Я переписывал код несколько раз и несколькими различными способами и перепробовал несколько руководств, но ничего не работает,

итак, вот код для страницы, на которой я сохраняю данные (Login.js )

 import React, { useState} from 'react'
import { View, Text,TextInput ,Button,SafeAreaView,Image,} from 'react-native'

import { ProgressDialog,Dialog } from 'react-native-simple-dialogs';

import AsyncStorage from '@react-native-community/async-storage';


import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
 
 

function Login ({navigation}){
 
  
  const[alerted,isalerted]=useState(false)
  const[authError,setAuthError]=useState(false)
  const[accInactive,isAccInactive]=useState(false)
  const[loginFail,didLoginFail]=useState(false)
  const[login,didLogin]=useState(false)
  const[email,setemail]=useState(email)
  const[ClientID,setClientID]=useState(ClientID)
  const[Password,setPassword]=useState(Password)

Здесь я пытаюсь установить элементы для Asyncstorage

   function LoginButton () {
    AsyncStorage.setItem("MyEmail",email)
  AsyncStorage.setItem("MyPassword",Password)
  AsyncStorage.setItem("MyClientID",ClientID)

    fetch('https://www.SITE.co.za/app-login.asp?ClientID=' ClientID 'amp;Username=' email 'amp;Pwd=' Password)
    .then((response) => response.json())
    .then((responseJson) => {
      //Successful response from the API Call
      
     
      if (JSON.stringify(responseJson).includes("Login Success")){
      
        {isalerted(true),didLogin(false),isLoggedIn('Yes')}
        
     
    
      
       
      }
    else if (JSON.stringify(responseJson).includes("No Authentication Details Received"))
    {
     {setAuthError(true)}
  
    }
   else  if (JSON.stringify(responseJson).includes("Account Not Active"))
    {
     {isAccInactive(true)}
  
    }
  else  if (JSON.stringify(responseJson).includes("Login Details Incorrect"))
    {
      {didLoginFail(true)}
  
    }
     
    })
    .catch((error) => {
      console.error(error);
    });
  }
  
  function navButton(){
   
 
   
    navigation.navigate('Dashboard')
    isalerted(false)
  }

     return (
        <KeyboardAwareScrollView keyboardShouldPersistTaps='handled'>
<SafeAreaView>
<ProgressDialog
    visible={didLogin}
    activityIndicatorColor="#4994CF"
    activityIndicatorSize="large"
    animationType="slide"
    title="Logging in"
    message="Please, wait..."
/>

<Dialog
    visible={alerted}
    
    onTouchOutside={''} >
    <View>
      <Text style={{color:'green',fontSize:20, marginBottom:10 ,textAlign:"center"}}>Login Success</Text>
      <Button
      title="Continue To Dashboard"
      onPress={navButton}
      />
       
    </View>
</Dialog>
 <Dialog
    visible={authError}
    
    onTouchOutside={''} >
    <View>
      <Text style={{color:'red',fontSize:20, marginBottom:10 ,textAlign:"center"}}>No Authentication Details Received</Text>
      <Button
      title="OK"
      onPress={ ()=>setAuthError(false)}
      />
       
    </View>
</Dialog>
<Dialog
    visible={accInactive}
    
    onTouchOutside={''} >
    <View>
      <Text style={{color:'red',fontSize:20, marginBottom:10 ,textAlign:"center"}}>Account Not Active</Text>
      <Button
      title="OK"
      onPress={ () =>isAccInactive(false)}
      />
       
    </View>
</Dialog>
<Dialog
    visible={loginFail}
    
    onTouchOutside={''} >
    <View>
      <Text style={{color:'red',fontSize:20, marginBottom:10 ,textAlign:"center"}}>Login Details Incorrect</Text>
      <Button
      title="OK"
      onPress={()=> didLoginFail(false)}
      />
       
    </View>
</Dialog> 


<View style={{flexDirection:"row"}}>
        <Image source={{uri: 'https://www.SITEe.co.za/images/smartpractice-logo-02.png'}}
       style={{marginTop:35,paddingTop:10
      , height: 80,width:360,flexWrap:'wrap',resizeMode:"contain" }} /> 
<Text style={{textAlign:'center',color:"#4994CF", marginTop:35}}>Beta</Text>
</View>
<View style={{width:'95%',alignContent:'center',marginLeft:10}}>
  <Text style={{fontSize:20,color:'grey'}}>Welcome to the SmartPractice Beta App,
    Please Login below with your SmartPractice login Details
  </Text>
</View>

        <View style={{marginTop:10,alignItems:"center"}}>
          <View style={styles.Label}>
          
        <Text style={styles.LabelText}>Email</Text>
        </View>
          <TextInput onChangeText={(text)=>setemail(text)} autoCompleteType='email' placeholder="Email"   style={{width:'95%',height:40,backgroundColor:'#d8d8d8',marginBottom:3, paddingHorizontal: 10,marginTop:5}}/>
          <View style={styles.Label}>
        <Text style={styles.LabelText}>Password</Text>
        </View>
          <TextInput onChangeText={(text)=>setPassword(text)} autoCompleteType="password" secureTextEntry={true} placeholder="Password"   style={{width:'95%',height:40,backgroundColor:'#d8d8d8',marginBottom:3, paddingHorizontal: 10,marginTop:5}}/>
          <View style={styles.Label}>
          <Text style={styles.LabelText}>ClientID</Text>
         </View>
          <TextInput onChangeText={(text)=>setClientID(text)} keyboardType="numeric" placeholder="ClientID"  style={{width:'95%',height:40,backgroundColor:'#d8d8d8',marginBottom:3, paddingHorizontal: 10,marginTop:5}}/>
       <View style={{marginTop:5,width:'95%'}}>   
       <View style={{width:'95%',alignContent:'center',marginLeft:10,marginBottom:10}}>
  <Text style={{fontSize:15,color:'grey'}}>ClientID : Log into Smartpractice on the internet and use the 4 digit number at the end of your URL (internet Address) of your login screen 
  </Text>
  </View>
<Button 

        title="Save"
        onPress={LoginButton}
      />
      </View>
        </View>
        </SafeAreaView>
        </KeyboardAwareScrollView>
      );
   
  
       }
      

  const styles = {
    container: {
      
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop:5
    },
    Label: {
      backgroundColor:'#A6A5A4',
      color:"white",
      textAlign: "center",
       marginTop:2,
       fontSize: 15,
       width:'100%',
       
       
  
    },
    alertmessage:{
      color:'green'
    },
    LabelText: {
      
      backgroundColor:'#A6A5A4',
      color:"white",
      textAlign: "center",
       fontSize: 20,
     
       
       
  
    },
  };

export default Login;

Здесь я пытаюсь получить некоторые данные (Dashboard.js )

 import React, {Component } from 'react'
import { View, Text,Image,TouchableOpacity,StyleSheet,SafeAreaView,} from 'react-native'


import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

import AsyncStorage from '@react-native-community/async-storage';

function Dashboard ({navigation}){
  
  

   let MyClientID = AsyncStorage.getItem("MyClientID")

   

  console.log(global.mail)
    
      return (
        <KeyboardAwareScrollView keyboardShouldPersistTaps='handled'>
        <SafeAreaView style={styles.container}>
        <View style={{flexDirection:"row"}}>
        <Image source={{uri: 'https://www.site.co.za/images/smartpractice-logo-02.png'}}
       style={{marginTop:5,paddingTop:10
      , height: 80,width:360,flexWrap:'wrap',resizeMode:"contain" }} /> 
<Text style={{textAlign:'center',color:"#4994CF", marginTop:35}}>Beta</Text>
</View>
<Image source={{uri: 'https://www.site.co.za/images/logos/' MyClientID '/main-dashboard-logo.png'}}
       style={{marginTop:5,paddingTop:10
      , height: 70,width:'100%',flexWrap:'wrap',resizeMode:"contain",marginLeft:5 }} /> 
<View style={{justifyContent:"center", marginTop:6}}>
 <Text style={styles.DateLabel}>Description</Text>
 
 </View> 
         

          <TouchableOpacity style={styles.ImageButton}
        onPress={() => navigation.navigate('Incidental Time')}
      >
<Image style={{flexWrap:'wrap',resizeMode:"contain",maxHeight:120,maxWidth:120 }}  tintColor='#4994CF' source={require('../../icons/time_log.png')} />
<Text style={styles.TextStyle}>Time Log</Text>

      </TouchableOpacity>
        </SafeAreaView> 
        </KeyboardAwareScrollView>
      
      );
    }
  

    const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    textInput: {
      backgroundColor:'#A6A5A4',
      color:"white",
      textAlign: "center",
       marginTop:5,
       fontSize: 20,
       marginBottom:5
      ,marginLeft:1
  
    },
    DateLabel: {
      backgroundColor:'#A6A5A4',
      color:"white",
      textAlign: "center",
       marginTop:2,
       fontSize: 20,
       paddingLeft:140,
       paddingRight:140,
       width:'100%',
       marginBottom:10
  
    },
    ImageButton: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    TextStyle:{
      color:"grey"
    
    }
  });

export default Dashboard;

Я попытался установить элементы в useeffect, обернув значения в setitems в STRING()
попытался создать функции и const с подключением async и await перед set / getitem
Я проверял SO в течение нескольких часов, и ни один из ответов или вопросов не помог мне в этом

Я серьезно не знаю, что я делаю неправильно, я следил за документами asynstorage, и даже копирование кода из документов не работает

Я не получаю ошибок, прошло 2 дня борьбы с чем-то таким простым, как локальное хранилище, пожалуйста, помогите

Ответ №1:

Оба GetItem и setItem AsyncStorage являются Promise, поэтому вам нужно использовать await или обратный вызов. Для setItem текущее использование в порядке, но для GetItem это важно. Вам также необходимо использовать GetItem в useEffect и сделать MyClientID в качестве состояния.

Попробуйте следующий код вместо вашего Dashborad.js:

 import React, {Component} from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
} from 'react-native';

import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

import AsyncStorage from '@react-native-community/async-storage';

function Dashboard({navigation}) {
  const [MyClientID, setMyClientID] = useState('');

  useEffect(() => {
    AsyncStorage.getItem('MyClientID').then((myClientID) => {
      setMyClientID(myClientID);
    });
  }, []);

  console.log(global.mail);

  return (
    <KeyboardAwareScrollView keyboardShouldPersistTaps="handled">
      <SafeAreaView style={styles.container}>
        <View style={{flexDirection: 'row'}}>
          <Image
            source={{
              uri: 'https://www.site.co.za/images/smartpractice-logo-02.png',
            }}
            style={{
              marginTop: 5,
              paddingTop: 10,
              height: 80,
              width: 360,
              flexWrap: 'wrap',
              resizeMode: 'contain',
            }}
          />
          <Text style={{textAlign: 'center', color: '#4994CF', marginTop: 35}}>
            Beta
          </Text>
        </View>
        <Image
          source={{
            uri:
              'https://www.site.co.za/images/logos/'  
              MyClientID  
              '/main-dashboard-logo.png',
          }}
          style={{
            marginTop: 5,
            paddingTop: 10,
            height: 70,
            width: '100%',
            flexWrap: 'wrap',
            resizeMode: 'contain',
            marginLeft: 5,
          }}
        />
        <View style={{justifyContent: 'center', marginTop: 6}}>
          <Text style={styles.DateLabel}>Description</Text>
        </View>

        <TouchableOpacity
          style={styles.ImageButton}
          onPress={() => navigation.navigate('Incidental Time')}>
          <Image
            style={{
              flexWrap: 'wrap',
              resizeMode: 'contain',
              maxHeight: 120,
              maxWidth: 120,
            }}
            tintColor="#4994CF"
            source={require('../../icons/time_log.png')}
          />
          <Text style={styles.TextStyle}>Time Log</Text>
        </TouchableOpacity>
      </SafeAreaView>
    </KeyboardAwareScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textInput: {
    backgroundColor: '#A6A5A4',
    color: 'white',
    textAlign: 'center',
    marginTop: 5,
    fontSize: 20,
    marginBottom: 5,
    marginLeft: 1,
  },
  DateLabel: {
    backgroundColor: '#A6A5A4',
    color: 'white',
    textAlign: 'center',
    marginTop: 2,
    fontSize: 20,
    paddingLeft: 140,
    paddingRight: 140,
    width: '100%',
    marginBottom: 10,
  },
  ImageButton: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  TextStyle: {
    color: 'grey',
  },
});

export default Dashboard;

Комментарии:

1. ценность все еще вытягивается в качестве Null

2. Затем, пожалуйста, проверьте, правильно ли работает setItem, используя await и GetItem().then(console.log)

3. Спасибо, чувак, это сработало хорошо, мне пришлось внести несколько изменений при входе в систему. Я сохраняю значения в асинхронном хранилище, и оно загружается при входе в приложение.

Ответ №2:

Не связано с вашим запросом, но, честно говоря, исходя из моего опыта, Expo — это последнее, что вы хотите использовать в своем проекте. Особенно, если вы будете вводить собственные зависимости позже.

Я знаю, что тогда вы можете использовать ExpoKit, но все же… Не используйте Expo

Вместо KeyboardAwareScrollView этого вы можете использовать Content from NativeBase.

Для вашего запроса все методы в AsyncStorage являются асинхронными. Поэтому не забудьте использовать await для получения ваших значений

 async function fetchLocal(){
    const persisted = await AsyncStorage.getItem("persisted");
    
    if(persisted){
        console.log(JSON.parse(persisted)); // Oh! the value for these persisted keys needs to be a string, so make sure to String()|.toString()|JSON.stringify objects you wanna serialize. 
    }
}