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

这里是另一个simple example。

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

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

3 个答案: