Реагировать на родной Async Storage не работает

Question

Я пытаюсь сделать процесс аутентификации, поэтому мой App.js:

import React, { Component } from "react";
import { AsyncStorage } from "react-native";
import Router from "./Router";
import ScanForm from "./components/ScanForm";

console.disableYellowBox = true;

class App extends Component {
  state = {
    isLoggedIn: false
  };

  componentWillMount() {   
    const temp = AsyncStorage.getItem("operator");
    console.log(temp);

    if (temp !== undefined) {
      this.setState({ isLoggedIn: true });
    }
  }

  render() {
    if (this.state.isLoggedIn) {
      return <ScanForm />;
    } else {
      return <Router />;
    }
  }
}

export default App;

Так что, если пользователь впервые открывает приложение, operator является нулевым или неопределенным (я пробовал оба, но без результатов) - (тогда в LoginForm я поменяю operator что-то вроде "Джон" после того, как пользователь входит в систему).

Но это возвращает <Router /> по какой-то причине (учтите, что isLoggedIn должно быть ложно, но...)

Я также попытался установить Item в этом разделе для тестирования, но снова никаких результатов:

componentWillMount() {
    AsyncStorage.setItem("operator", "John");

    const temp = AsyncStorage.getItem("operator");
    console.log(temp);
  }

Но console.log(temp); говорится undefined снова!

Почему я не могу использовать setItem а затем получить данные с getItem?

Заранее спасибо!

Answer 1

AsyncStorage является асинхронным:-). Подтвержденное значение не доступно, пока не вернется его возвращенное обещание. В обмен на это неудобство, оно не будет блокировать ваш поток JavaScript во время написания.

Если вы попытаетесь:

AsyncStorage.setItem("operator", "John").then(
   () => AsyncStorage.getItem("operator")
         .then((result)=>console.log(result))
)

Вы должны получить то, что вы ожидаете. (Это также может быть выполнено с использованием async / await, как показано в документации AsyncStorage).

Вы действительно не показываете нам, как вы вводите реквизиты в свое приложение, но если вы обновляете <App>реквизит с isLoggedIn когда значение обновляется на then, ваш компонент должен обновиться соответственно.