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

React Native Async存储不工作

  •  1
  • MoKhajavi75  · 技术社区  · 7 年前

    我正在尝试进行身份验证过程,因此我的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 回复  |  直到 7 年前
        1
  •  4
  •   Joshua R.    7 年前

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

    如果您尝试:

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

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

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