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

Question

我是一名反应型新手。

我正在尝试在应用程序中使用异步存储。 我希望异步存储在用户登录时存储令牌，它将导航到主屏幕。 在主屏幕上，即时消息试图通过异步存储获取令牌并将其打印在控制台上，但我得到的只是承诺。 我只想知道使用异步存储的正确方法是什么，尤其是在存储令牌时？ 我知道解决此问题的替代方法是使用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

你应该用这样的东西

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 }))

这是另一个简单的例子 。

Answer 3

尝试将其与Async结合使用并等待

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;
}