javascript - 在 componentDidMount() 中存储/获取异步存储值

Question

我正在尝试保存用户在 TextInput 中输入的名称，以便用户每次打开应用程序时仍会保存其名称。

我正在尝试使用 react-native 的异步存储来获取 componentDidMount() 函数中的名称。我相信在调用 onSubmit() 方法时没有设置该值。我尝试在 async 函数中删除 await 关键字。我阅读了其他文档，但找不到我出错的地方。

onSubmit = () => {
   var that = this
   var data = this.state.textValue;
   nameDict['name'] = data;
   _setData = async () => {
    try {
      const value = await AsyncStorage.setItem('name',data)
      that.setState({textValue:'',name:data})
    } catch (error) {
      that.setState({textValue:'',name:'error'})
    }
  } 
 }

componentDidMount(){
  var that = this;
  var name = ''

this.watchId = navigator.geolocation.watchPosition((position)=>{
  _retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem('name')
      name = value

    } catch (error) {
        // Error retrieving data
    }
  } 
}

ComponentDidMount() 中的 name 变量始终为空字符串，因此要么根本没有更改，要么 getItem() 函数没有解析并返回名称。但是，我不确定这两者中的哪一个。我是否错误地使用了异步功能？

标签： javascriptreact-native

Answer 1

您还必须将 set componentDidMount设置为async

使用您的数据的示例：

async componentDidMount(){

var that = this;
  var name = ''

this.watchId = navigator.geolocation.watchPosition((position)=>{
  _retrieveData = async () => {
    try {
      await AsyncStorage.getItem('name').then((value)=>name=value);
    } catch (error) {
        // Error retrieving data
    }
  } 
}

如果您想实际使用该值，我建议将name设为全局。

接下来，这可能是个人的，但我建议JSON.stringify()存储数据时的值和检索数据时的JSON.parse()

检索字符串化数据时的示例

async componentDidMount(){

var that = this;
  var name = ''

this.watchId = navigator.geolocation.watchPosition((position)=>{
  _retrieveData = async () => {
    try {
      await AsyncStorage.getItem('name').then((value)=>name=JSON.parse(value));
    } catch (error) {
        // Error retrieving data
    }
  } 
}

如果这有帮助，请设置为答案，如果没有，请发表评论。