代码之家 › 专栏 › 技术社区 › MoKhajavi75

React Native Async存储不工作

asyncstorage async-await react-native javascript

1

MoKhajavi75 · 技术社区 · 8 年前

我正在尝试进行身份验证过程,因此我的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 我要换一个 操作人员 在用户登录后转到类似“john”的内容)。

但它正在返回 <Router /> 出于某种原因(考虑到 isLoggedIn 逻辑上必须是错误的,但是…)

我也试过 设置项 在该部分进行测试,但没有结果:

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

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

但是 console.log(temp); 说 undefined 再一次!

为什么我不能用 setItem 然后用 getItem 是吗?

提前谢谢!

1 回复 | 直到 8 年前

1

4

Joshua R. 8 年前

异步存储是 异步的 :-)。提交的值在其返回的承诺解决之前不可用。作为这种不便的交换,它不会在编写过程中阻塞javascript线程。

如果您尝试:

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

你应该得到你所期望的。(这也可以使用async/await完成,如 AsyncStorage docs )中。

你并没有向我们展示如何在你的应用程序中添加道具,但是如果你更新了 <App> 的道具 isLoggedIn 当值在 then ,组件应相应更新。