导航 getParam 状态在第一次导航时未定义答案

【问题标题】：Navigation getParam state got undefined on the first navigation导航 getParam 状态在第一次导航时未定义
【发布时间】：2020-09-16 02:57:46
【问题描述】：

我想将我的一些状态导航到其他屏幕，但在第一次尝试导航时，data_post 的状态未定义，但在第二次尝试时未定义。我的代码中是否有任何错误/错字？谢谢

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
 });
}

在另一个屏幕上，我这样写getParam

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))

【问题讨论】：

标签： react-native navigation state react-navigation

【解决方案1】：

这是因为 setState 是异步的。阅读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 
 });
}

【讨论】：