javascript - react 本地异步存储不起作用

我正在尝试进行身份验证过程，因此我的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为null或未定义（我尝试了两者但都没有结果）-（然后，在LoginForm中，我将operator更改为类似“ john”的内容用户登录）。

但是出于某种原因它返回了<Router />（考虑到isLoggedIn逻辑上必须为false，但是...）

我也曾尝试在该部分中的setItem进行测试，但没有任何结果：

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

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

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

为什么我不能使用setItem然后使用getItem提取数据？

提前致谢！

最佳答案

AsyncStorage是异步的:-)。在其返回的承诺解决之前，承诺的值不可用。作为这种不便的交换，在编写过程中，它不会阻止您的JavaScript线程。

如果你试试：

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

您应该得到期望的结果。（这也可以使用AsyncStorage docs中所示的async / await来完成）。

您并没有真正向我们展示如何将道具输入到应用程序中，但是如果在<App>上更新值时用isLoggedIn更新then的道具，则组件也应相应更新。

isLoggedin

javascript - react 本地异步存储不起作用