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
– Manish Khedekar, Commented Jun 25, 2019 at 13:43
You are not returning anything from this function... unsure what the question in. Who's calling this? stackoverflow.com/help/how-to-ask. Are the alerts getting called? Please improve your question following the guidelines from the link above — Ruan Mendes
– Ruan Mendes, Commented Jun 25, 2019 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
– Yury Tarabanko, Commented Jun 25, 2019 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
– Ruan Mendes, Commented Jun 25, 2019 at 13:56

Marco Ghiani · Accepted Answer · 2019-06-25 13:51:48Z

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, 2019 at 13:51

Marco Ghiani

1273 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ruan Mendes Over a year ago

Note that you should avoid calling setState from the render function as the OP is doing. See stackoverflow.com/questions/48226268/…

Noivy Over a year ago

This answer didn't work, I still get null when I print this.state.CarName

Marco Ghiani Over a year ago

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.

Collectives™ on Stack Overflow

async function doesn't execute

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related