получить данные из asyncStorage в реагировать родной - PullRequest
Новая
       8

получить данные из asyncStorage в реагировать родной

0 голосов
/ 19 сентября 2018

Я знаю, что был задан похожий вопрос, например this , но я не могу найти ответ на этот вопрос.Я новичок в реакции-родной, а также.Мне нужно извлечь данные из хранилища. Вот как я сохраняю значение после вызова API 

_storeData = async response => {
 it AsyncStorage.setItem(token, (response))
  .then(() => {
  this.setState({
     shouldLoad : false
   });  
    console.log("Data saved successfully" + response);
    this.props.navigation.navigate("HomeScreen");
  })
  .catch(() => {
    console.log("There was an error saving the data");
  });
 };

Так я пытался извлечь данные из AsyncStorage 

 AsyncStorage.getItem(token).then((token) => {
  this.setState({
    token : tokentoken,
    currentState : false
  });
});

То, чего я пытаюсь достичь - это управление сессиями.При входе в систему я сохраняю sessionToken в AsyncStorage, и когда приложение запускается снова, мне нужно получить данные обратно.Я пробовал другой код, но не получаю вывод.

Любая помощь будет оценена Спасибо заранее

РЕДАКТИРОВАТЬ 1.

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

export default class App extends Component {
 constructor() {
super();
this.state = {
  token: null,
  currentState : true,
};
}

 componentDidMount() {
AsyncStorage.getItem(token).then((token) => {
  this.setState({
    token : tokentoken,
    currentState : false
  });
});
  }


  render() {
var ggg = this.state.token;
console.log(ggg);

if(this.state.currentState === false){

if (this.state.token === "" || this.state.token === null) {
  return <LoginNav />;
} else {
  return <HomeNavigatorNew />;
}

}

 else{
return (  <ActivityIndicator  
  animating={true}
    style={{ 
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',

      height: 80
    }}
    size="large"
  />)
  }
  }
 }

РЕДАКТИРОВАТЬ 2.

Я писал вышеуказанный код в App.js. Я просто переместил весь код в Login.js (другой файл)и это просто сработало.Это что-нибудь значит? ..?Это как то, что я должен написать код восстановления в App.js

EDIT 3. Спасибо @Mohammed Ashfaq и @Samer Murad за быстрый ответ.В коде Sammrs я заметил, что AsyncStorage импортируется в фигурных скобках не без них.Я импортировал без них.Я упоминал в своем EDIT 2, что код работал в другом файле, в котором AsyncStorage заключен в фигурные скобки.Оставляя измененный рабочий код для дальнейшего использования для кого-то 

 import React, {Component} from "react";
 import   {AsyncStorage, ActivityIndicator} from "react-native";
 import { createStackNavigator} from "react-navigation";

 export default class App extends Component {
  constructor() {
   super();
   this.state = {
  token: null,
  currentState: true,
};
 }
  _retrieveData = async () => {
   console.log("Data retrieved successfully");

 // var tokenRetrieved = AsyncStorage.getItem('LoginTocken');
await AsyncStorage.getItem('LoginTocken')
  .then(value => { 
    return (value);
  })
  .then ( valueJson => {
    this.setState({
      token : valueJson,
      currentState : false
    });
    console.log("Data retrieved successfully", valueJson);
  })
  .catch((error) => {
    console.log("There was an error retrieving the data" + error);
  });



  };

  handleSession = async () => {
console.log("handleSession");
   this._retrieveData().catch((error) => {console.log("error is " + 
 error);});
  };

  componentWillMount() {
console.log("componentWillMount");
this.handleSession();
  }


  render() {


if (this.state.token === "" || this.state.token === null) {
  return <LoginNav / > ;
} else {
  return <HomeNavigatorNew / > ;
}
 }

}

Я понятия не имею, почему и как это имеет значение, когда какой-то импорт выполняется без фигурных скобок ** {} **, где некоторые сделаныс ними.Если кто-нибудь знает, почему фигурные абзацы иногда опускаются / добавляются, я прошу их оставить ответ.

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018 

 /* Login Screen */

async storeSessionToken(token) {
  try {
    await AsyncStorage.setItem('token', token);
    console.log("Data saved successfully");
    // Rest of your code
  } catch (error) {
    console.log("Error while storing the token");
  }
}




/* Splash Screen  */ 

async retrieveSessionToken() {
  try {
    const token = await AsyncStorage.getItem('token');
    if (token !== null) {
      console.log("Session token",token );
      return token;
    }
   } catch (error) {
     console.log("Error while storing the token");
   }
}



// calling retrieveSessionToken
componentDidMount() {
  this.retrieveSessionToken()
  .then((token)=> { 
    if(token) this.setState({token: token})
  })
}
0 голосов
/ 19 сентября 2018

Вот обертка LocalStorage, которую я написал не так давно. Она также включает в себя функциональность для установки TTL для объекта / ключа, если вам нужно поведение даты окончания срока действия, я использую ее для той же логики, что и вы, чтопроверьте, есть ли сохраненный токен, и перейдите к основному представлению приложения вместо страницы входа.

Вот обертка: 

// RN < 0.59
import { AsyncStorage } from 'react-native'
// RN > 0.59
import AsyncStorage from '@react-native-community/async-storage';


/**
 *
 * @param key Key value of the object to be saved
 * @param object The Object to save
 * @param ttl (Optional) set an expiration date on an object in ms
 * @return {Promise<void>}
 */
export const setObjectForKey = async ({key, object, ttl = undefined }) => {

    if (!key) throw new Error('Cannot set an object without a key');

    if (!object) throw new Error('Cannot set a key without an object');

    let expiresAt = undefined;
    if (ttl) {
        expiresAt = new Date().getTime() + ttl;
    }
    let wrappedObj = {
        object,
        expiresAt,
    };
    let stringedWrapper = JSON.stringify(wrappedObj);

    return await AsyncStorage.setItem(key,stringedWrapper)
};


/**
 *
 * @param key The key of the object to remove
 * @return {Promise<void>}
 */
export const removeObjectForKey = async (key) => {
    return await AsyncStorage.removeItem(key)
};


/**
 *
 * @param key The key of the object to retrieve
 * @return {Promise<*>}
 */
export const getObjectForKey = async (key) => {
    let now = new Date().getTime();
    let stringedWrapper = await AsyncStorage.getItem(key);

    if (!stringedWrapper) throw new Error('No key found for object');

    let wrapper = JSON.parse(stringedWrapper);
    if (wrapper.expiresAt < now) {
        // Object expired
        AsyncStorage.removeItem(key);
        throw new Error('Object expired');
    } else {
        return wrapper.object;
    }
};

А вот пример использования (в моем решенииУ меня есть промежуточное программное обеспечение с избыточностью, поэтому после извлечения объекта я вызываю диспетчеризацию):

GET: 

let key = 'APP_TOKEN';
localstorage.getObjectForKey(key)
            .then((retrievedObject) => {
               // Do what you want with object
            })
            .catch((err) => {
               // Handle error, Object either doesn't exist, expired or a system error
            })

SET: 

 let key = 'APP_TOKEN';
 let object = {token: 'JWT_HASH'};
 let ttl = undefinded // TTL is optional
 localstorage.setObjectForKey({
            key,
            object,
            ttl,
        })
            .then(() => {
               // Set was successfull
            })
            .catch((err) => {
                // Handle Error
            })

УДАЛИТЬ: 

localstorage.removeObjectForKey(key)
            .then(() => {
              // Successfully deleted
            })
            .catch((err) => {
               // Object either doesn't exist to delete or system error
            })

Обратите внимание, что я на самом деле сохраняю объекты, которые преобразуются в строку, поэтому даже если я сохраняю маркер API, я на самом деле сохраняю объект стокен в качестве ключа, то есть: {token: 'TOKEN'}

Надеюсь, что поможет

ОБНОВЛЕНИЕ 2019-06-06

По состоянию на react-native 0.59, модуль AsyncStorageустарела из-за попыток сделать библиотеку ядра react-native более тонкой ... AsyncStorage теперь должен быть установлен через @ reaкар-нативное сообщество / реагирует родную Асинхр-хранение

...