setState function not assigning boolean.. why? - reactjs

Question

Im new to react native and i was not able to undestand this behaviour.
in a async function i am setting a loading boolean to the state before an api call.
Now what is strange: after recieving the response i cannot set the loading boolean back to false. it just keeps waiting at the setState function without reaching callback.
I already tryed to setState in multiple calls for every value. or all in one function call. i also tried to assign the whole response to state.
in react native i can console log the response after fetching it form backend. also i am able to assign the response to the state when leaving the loading boolean out (reaching callback).. however not when trying to set the loading boolean back to false.
hint (maybe):
in the json response i include an array. when leaving out the array (not assigning it to state) it behaves like it should...
please help!
// here my mistery
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
}
}
async onLogin() {
try {
this.setState({ loading: true }, function () {
console.log('loading is:' + this.state.loading)
}); //works great
const { name, password } = this.state;
//here the api call
const response =
await fetch(`http://10.0.2.2:3000/api/login/${name}&${password}`);
const answer = await response.json();
if (answer.user == 'OK') {
//now the strange function-call
this.setState({
tickets: answer.tickets, //this is the array..!
title: answer.event.title,
token: answer.token.token,
tokenDa: true,
//loading: false, //only reaching callback when commenting that out
}, function () {
console.log('tickets are :' + this.state.tickets[0].kategorie)
})
// same behaviour here
// this.setState({loading: false}, function(){
// console.log('loading ist ' + this.state.loading);
// });
}
}
catch{
console.log('in CATCH ERROR')
}
}
// here also the render function in case that matters:
render() {
if (this.state.loading) {
return (
<View style={styles.container}>
<ActivityIndicator size='large' />
</View>
);
}
return this.state.tokenDa ? (
<View style={styles.container}>
<Text>Event Title : {this.state.title} </Text>
<Button
title={'scan'}
style={styles.input}
/>
{this.state.tickets.map((ticket, i) => (
<div key={i}>
<Text >TicketKategorie : {ticket.kategorie}</Text>
<Text > Datum und Türöffnung {ticket.gueltig_am}</Text>
<Text >Verkauft {ticket.verkauft}</Text>
<Text >Eingescannt {ticket.abbgebucht}</Text>
</div>
))}
</View>
) : (
<View style={styles.container}>
<TextInput
value={this.state.name}
onChangeText={(name) => this.setState({ name })}
placeholder={'Username'}
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
style={styles.input}
/>
<Button
title={'Login'}
style={styles.input}
onPress={this.onLogin.bind(this)}
/>
</View>
)
};
};
the result is: a loading screen due to a loading attribute which i cannot set back to false. why is this happening!?

Answer 1

You need to wrap the rest of your code inside the callback for the first setState, like this...
this.setState({ loading: true }, async function () {
const { name, password } = this.state;
const response =
await fetch(`http://10.0.2.2:3000/api/login/${name}&${password}`);
const answer = response.json();
if (answer.user == 'OK') {
this.setState({
tickets: answer.tickets, //this is the array..!
title: answer.event.title,
token: answer.token.token,
tokenDa: true,
loading: false
});
}
});

Answer 2

As you may have already deduced, there is an issue with the asynchronous nature of your setStates. To workaround this, we can create another function to handle the the actual API request and use that in the call-back for the first set-state.
setLoading = () => {
this.setState({ loading: true }, () => this.onLogin())
}
onLogin = async () => {
const { name, password } = this.state;
//here the api call
const response = await fetch(`http://10.0.2.2:3000/api/login/${name}&${password}`);
const answer = await response.json();
if (answer.user == 'OK') {
this.setState({
tickets: answer.ticketsm
title: answer.event.title,
token: answer.token.token,
tokenDa: true,
loading: false
}, function () {
console.log('tickets are :' + this.state.tickets[0].kategorie)
})
}