async function doesn't execute

Question

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

The call of the function :

render() {
                this.retrieveData();

I want to use my retrieve function in order to assign a value to the DBCarName state in order to render it in a Text component. The thing is, when calling the function in the render method, it returns null, which probably means that my function didn't execute and my array state is empty.

Any idea on how to deal with this?

No. Then it would be an alert with `error`. Maybe you are just having a typo with `VOITURE` or it may have the value null set by default or by any operation. — Manish Khedekar, Jun 25 '19 at 13:43
You are not returning anything from this function... unsure what the question in. Who's calling this? https://stackoverflow.com/help/how-to-ask. Are the alerts getting called? Please improve your question following the guidelines from the link above — Ruan Mendes, Jun 25 '19 at 13:43
You should not directly mutate `this.state`. There is `setState` method for that. You should not call functions involving side-effects in `render`, use corresponding lifecycle method or hooks for that. — Yury Tarabanko, Jun 25 '19 at 13:53
That is, if you want to get some data at startup you'd implement `didMount()` and modify your state there. — Ruan Mendes, Jun 25 '19 at 13:56

score 7 · Answer 1 · answered Jun 25 '19 at 13:51

7

This happens because you're trying to reassign the state of a component, while you should instead use the provided this.setState function. Since you are using the AsyncStorage and this.state, i suppose it's a React Native project, here how your code should look like:

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 () {...}
}

answered Jun 25 '19 at 13:51

Marco Ghiani

127
3

5

Note that you should avoid calling setState from the render function as the OP is doing. See https://stackoverflow.com/questions/48226268/calling-setstate-in-react-from-render-method – Ruan Mendes Jun 25 '19 at 13:54
This answer didn't work, I still get null when I print this.state.CarName – Noivy Jun 25 '19 at 14:31
This happens because of the natural asynchronicity of this.setState method, you should console.log(this.state.DBCarName) into the callback passed as second argument for this.setState(), you can find many examples checking the documentation of setState. also, if you keep getting null, i also suppose your VOITURE key in the store doesn't exist. – Marco Ghiani Jun 25 '19 at 14:36

async function doesn't execute

1 Answers1