Navigation getParam state got undefined on the first navigation

Question

I want to navigate some of my state to other screen, but on the first attempt of navigation, the state of data_post is undefined, but not on the second attempt. Is there any wrong/typo in my codes? Thanks

async _goToPayment() {
 var randomNumber1 = Math.floor(Math.random() * 990);
 var randomNumber2 = Math.floor(100000 + Math.random() * 900000)
 var orderID = Moment().format('yyyyDDMM')+randomNumber2
 let data_buyer = {
  first_name: this.state.firstName,
  last_name: this.state.lastName,
  email: this.state.emailUser
 }
 let dataPost = {
  total_price: this.state.totalPrice,
  ticket_id: this.state.idTicket,
  total_buyer: 1,
  event_id: this.state.idEvent,
  ticket_name: this.state.ticketName,
  kode_unik: randomNumber1,
  order_id: orderID
 }
 this.setState({
  marked1: data_buyer,
  marked2: dataPost
 });
 this.props.navigation.navigate("ChoosePayment", {
  data_buyer: this.state.marked1,
  data_post: this.state.marked2,
  eventData: this.state.eventData
 });
}

On the other screen, I wrote getParam like this

const { navigation } = this.props
await this.setState({
 data_buyer: navigation.getParam("data_buyer", ""),
 data_post: navigation.getParam("data_post", ""),
 eventData: navigation.getParam("eventData", "")
}, () => console.log(this.state.data_post))

score 1 · Accepted Answer · answered Sep 16 '20 at 04:56

This is happening because setState is asynchronous. Read this answer you will get an idea about it.

just update your code like this

async _goToPayment() {
 var randomNumber1 = Math.floor(Math.random() * 990);
 var randomNumber2 = Math.floor(100000 + Math.random() * 900000)
 var orderID = Moment().format('yyyyDDMM')+randomNumber2
 let databuyer = { // renamed from data_buyer to databuyer
  first_name: this.state.firstName,
  last_name: this.state.lastName,
  email: this.state.emailUser
 }
 let dataPost = {
  total_price: this.state.totalPrice,
  ticket_id: this.state.idTicket,
  total_buyer: 1,
  event_id: this.state.idEvent,
  ticket_name: this.state.ticketName,
  kode_unik: randomNumber1,
  order_id: orderID
 }
 this.setState({
  marked1: databuyer, //changed here
  marked2: dataPost
 });
 this.props.navigation.navigate("ChoosePayment", {
  data_buyer: databuyer, //directly pass databuyer here
  data_post: dataPost, //directly pass dataPost here
  eventData: this.state.eventData 
 });
}

Navigation getParam state got undefined on the first navigation

1 Answers1