Not updating the state instantly - reactjs

Question

So, when I click on the add to cart button on the Screen2, it logs articleToCart aka cartArticle as empty array... Only when I go back to Screen1 and than again on the Screen2, pressing add to cart button again it logs cartArticle array with one item even though add to cart button was clicked 2x... How can I make it that when I click on add to cart button, it updates the state immediately? What am I doing wrong? I am using react navigation v2. Is it possible to setState trough params and that to be instant not like this, with delay?
class Screen1 extends Component {
state = {
articles: {
article: [],
},
cartArticle: []
};
articleToCart = () => {
this.setState(prevState => {
return {
cartArticle: prevState.cartArticle.concat(prevState.articles.article)
};
});
};
qrCodeOnReadHandler = ({ data }) => {
fetch(data)
.then(response => response.json())
.then(json => [
console.log(json),
this.setState({
...this.state,
articles: {
...this.state.articles,
article: json[0],
}
}),
this.props.navigation.navigate("Screen2", {
addToCartOnPress: () => this.articleToCart(),
articleToCart: this.state.cartArticle,
})
])
.catch(err => {
alert("Nesto ne valja. Pokusajte ponovo!");
console.log(err);
});
};
render() {
return (
);
}
}
Second screen
class Screen2 extends Component {
addToCartHandler = () => {
const { navigation } = this.props;
const articleToCart =navigation.getParam("articleToCart","Nedostupno");
const add = navigation.getParam("addToCartOnPress", "Nedostupno");
console.log(articleToCart);
add();
};
goBackHandler = () => {
this.props.navigation.goBack();
};
render() {
return (
<View style={styles.buttons}>
<CustomButton color="#1DA1F2" onPress={this.goBackHandler}>
Back
</CustomButton>
<CustomButton color="#1DA1F2" onPress={this.addToCartHandler}>
Add to Cart
</CustomButton>
);
}
}

Answer 1

in your qrCodeOnReadHandler on screen1:
[
console.log(json),
this.setState({
...this.state,
articles: {
...this.state.articles,
article: json[0],
}
}),
this.props.navigation.navigate("Screen2", {
addToCartOnPress: () => this.articleToCart(),
articleToCart: this.state.cartArticle,
})
]
you are returning an array with your functions as its indices.
try changing it to this instead.
{
console.log(json);
this.setState({
...this.state,
articles: {
...this.state.articles,
article: json[0],
}
});
this.props.navigation.navigate("Screen2", {
addToCartOnPress: () => this.articleToCart(),
articleToCart: this.state.cartArticle,
})
}

Answer 2

setState is async, you can't read values just after setting them .. but you can use setState callback, sth. like this:
.then(json => {
console.log(json)
this.setState({
...this.state,
articles: {
...this.state.articles,
article: json[0],
}
}, () => {
this.props.navigation.navigate("Screen2", {
addToCartOnPress: () => this.articleToCart(),
articleToCart: this.state.cartArticle,
})
})
})