异步功能无法执行

时间:2019-06-25 13:39:34

标签: javascript reactjs react-native

retrieveData = async () => {
    try {
        //Retrieving values from AsyncStorage
        let voiture = await AsyncStorage.getItem('VOITURE')
        this.state.DBCarName=[];
        this.state.DBCarName = JSON.parse(voiture);
        alert(this.state.DBCarName)
    }
    catch {
        alert('error')
    }
}

该函数的调用:

render() {
                this.retrieveData();

我想使用我的检索函数以便为DBCarName状态分配一个值,以便在Text组件中呈现它。问题是,在render方法中调用该函数时,它返回null,这可能意味着我的函数未执行且数组状态为空。

关于如何处理此问题的任何想法?

1 个答案:

答案 0 :(得分:7)

发生这种情况是因为您试图重新分配组件的状态,而应该使用提供的this.setState函数。 由于您使用的是AsyncStorage和this.state,因此我想它是一个React Native项目,这里的代码应如下所示:

class YourComponentName extends React.Component {
  state = {
    DBCarName: []
  }

  retrieveData = async () => {
    try {
      //Retrieving values from AsyncStorage
      const voiture = await AsyncStorage.getItem('VOITURE')
      this.setState({ DBCarName: JSON.parse(voiture) })
    } catch (err) {
        console.log(err)
    }
  }

  render () {...}
}