react-native: Using async/await with setState - json

Question

I have this simple code.
export default class ProductDetail extends Component {
constructor(props) {
super(props);
this.state = { test: null,id:this.props.navigation.state.params.productId };
console.log(1);
}
componentWillMount() {
console.log(2);
this.getProductRequest(this.state.id);
console.log(3);
}
async getProductRequest(id) {
try {
let api_token = await AsyncStorage.getItem('apiToken')
let response = await fetch('...')
let json = await response.json();
this.setState({test: json});
} catch(error) {
//
}
}
render() {
console.log(4);
console.log(this.state.test);
return (
<View><Text>test</Text></View>
);
}
}
Now, I checked it in a debuger:
I expect this result:
1
2
3
4
{data: {…}, status: "success", ...}
But I get this:
1
2
3
4
null
4
{data: {…}, status: "success", ...}
I think it means render() run twice!
how can I handle this error?

Answer 1

I think it means render() run twice!
It does: Once before your async result is available, and then again when it is and you use setState. This is normal and expected.
You can't hold up the first render waiting for an async operation to complete. Your choices are:
Have the component render appropriately when it doesn't have the data yet. Or,
If you don't want to render the component at all until the async operation has completed, move that operation in to the parent component and only render this component when the data is available, passing the data to this component as props.

Answer 2

Just to add to T.J Crowder's answer, one thing I like to do is return an ActivityIndicator if data is not received yet.
import {
View,
Text,
ActivityIndicator
} from 'react-native';
export default class ProductDetail extends Component {
... your code ...
render() {
if (!this.state.test) {
return <ActivityIndicator size='large' color='black' />
}
console.log(4);
console.log(this.state.test);
return (
<View><Text>test</Text></View>
);
}
}