使用异步存储的正确/正确方法是什么？

Question

我是 react-native 新手。

我正在尝试在我的应用程序中使用异步存储。 我希望异步存储在用户登录时存储令牌，它将导航到主屏幕。在主屏幕上，我试图通过异步存储获取令牌并将其打印在控制台上，但我得到的只是承诺。我只想知道使用异步存储的正确方法是什么，尤其是在存储令牌时？我知道这个问题的替代方法是使用 Redux 状态管理，但我正在尝试学习基本方法。

我尝试将令牌存储在 ComponentWillMount() 中的变量中，但它仍然不起作用。

class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {
    token = getToken();
  }

  render() {
    const { navigate } = this.props.navigation;
    console.log(token);
    return (
      <View style={styles.container}>
        <Text> HomeScreen </Text>
      </View>
    );
  }
}

const getToken = async () => {
  let token = "";
  try {
    token = await AsyncStorage.getItem("token");
  } catch (error) {
    console.log(error);
  }
  return token;
};

Answer 1

首先，我应该注意 componentWillMount 已弃用，您可以改用 constructor 或 componentDidMount。

如果您在getToken 中登录令牌并获得它后，它将正常工作。如果你想检查用户是否登录，你可以这样做

constructor(props) {
    super(props);
    this.state = {};

    getToken().then((token)=>{
       console.log(token)
       //check if user is logged in
    })
}

或者您可以在componentDidMount 中执行此操作。 希望对你有帮助

Answer 2

尝试将其与 Async 和 await 一起使用

setValue: function (key, value) {
    AsyncStorage.setItem(key, value)
},

getValue: async (key) => {
    let value = '';
    try {
        value = await AsyncStorage.getItem(key) || 'none';
    } catch (error) {
        // Error retrieving data
        console.log(error.message);
    }
    return value;
}

Answer 3

你应该像这样使用它，

import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native';

  //for storing Data

   setName = (value) => {
      AsyncStorage.setItem('name', value);
      this.setState({ 'name': value });
   }


//for Retrieving Data

 componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value }))

这是另一个simple example。