React应用中Firebase数据库无法存储UUID生成票号问题

你踩了React异步更新的坑——setState是异步执行的，当你调用createTicket(this.state.Passengerinfo)时，状态还没完成更新，传进去的还是旧的Passengerinfo，自然没有新生成的ticketNumber。

方法一：用setState的回调函数等状态更新完再存 #

setState支持传入一个回调函数，这个函数会在状态更新完成后触发，此时调用createTicket就能拿到带ticketNumber的最新数据：

cardinfoSubmitHandeler = (e) => {
  e.preventDefault();
  this.setState({
    infoDetails: false,
    cardGenerate: true,
    Passengerinfo: {
      ...this.state.Passengerinfo,
      ticketNumber: uuid().slice(0, 13), // uuid本身就是字符串，无需toString()
    },
  }, () => {
    createTicket(this.state.Passengerinfo);
  });
};

方法二：先算好新数据再复用 #

先把包含ticketNumber的新乘客信息对象计算出来，既用来更新状态，也直接传给createTicket，完全避开异步更新的问题：

cardinfoSubmitHandeler = (e) => {
  e.preventDefault();
  const newPassengerInfo = {
    ...this.state.Passengerinfo,
    ticketNumber: uuid().slice(0, 13),
  };
  this.setState({
    infoDetails: false,
    cardGenerate: true,
    Passengerinfo: newPassengerInfo,
  });
  createTicket(newPassengerInfo);
};

• uuid()返回的本来就是字符串，slice操作后依旧是字符串，你之前加的toString()完全多余，可以直接删掉。
• 方法二更稳妥，不用依赖回调的执行时序，逻辑更清晰直观。

内容的提问来源于stack exchange，提问作者Hasan