How to call an async method in render method from Expo? - react-native

Question

I saved data to AsyncStorage. Now I want to show all data from AsyncStorage in separate screen.
Method getData is async method. It reads from AsyncStorage.
I use code like that
import React from "react";
class List extends React.Component {
state = { list: null };
async componentDidMount() {
const list = await getData("List");
console.log('LIST: ' + JSON.stringify(list));
this.setState({ list });
}
render() {
const { list } = this.state;
console.log('state: ' + JSON.stringify(list));
if(list || list.length <= 0)
return (<View><Text>Empty.</Text></View>);
return (
<View>
{ list.map(item => (
<Text tabLabel={item}>{item}</Text>
))}
</View>
);
}
}
When I run that code, i get 2 console messages:
state: []
and
LIST: [{item1}, {item2}...]
It means that componentDidMount fires after render method, that is why UI is empty.
How can I change this. I need to read data from AsyncStorage and show it in UI.
Thank you.

Answer 1

componentDidMount as the title says is meant to run after render. To achieve what you want to do you can use componentWillMount.
import React from 'react';
class List extends React.Component {
state = { list: null };
componentWillMount() {
const loadData = async () => {
const list = await getData('List');
console.log('LIST: ' + JSON.stringify(list));
this.setState({ list });
};
loadData();
}
render() {
const { list } = this.state;
console.log('state: ' + JSON.stringify(list));
if (list || list.length <= 0)
return (
<View>
<Text>Empty.</Text>
</View>
);
return (
<View>
{list.map((item) => (
<Text tabLabel={item}>{item}</Text>
))}
</View>
);
}
}