另一部分完成后如何执行代码 EXPO REACT NATIVE

Question

我正在尝试将记录保存到数据库中，如果该记录不在用户的个人资料中（他没有发现这个地方），而且该记录存在于所有地方的集合中。

我正在使用 Expo react native，我认为我的问题是，如果条件将在函数 recordInUsersAccount 和 recordInGlobalDatabase 之前执行。完成这两个功能后，有什么方法可以确保执行？在函数中，我在 state={} 中重写变量，所以我可以在下面检查它们。 （我尝试了 .then() 和 await, async 但我没有成功）。

非常感谢。

saveScannedQrCode(idOfPlace) {

     this.recordInUsersAccount(idOfPlace);
     this.recordInGlobalDatabase(idOfPlace);

    if (!this.state.placeAlreadyScanned && this.state.placeExistInDatabase) {  
      // we will add this record into database
    } else {      
          // we will NOT add this record into database
  }
 }

这是函数的代码：

recordInUsersAccount(idOfPlace) {
        const userId = auth.currentUser.uid;
        const usersRef = db
          .collection("placesExploredByUsers") // default
          .doc("mUJYkbcbK6OPrlNuEPzK") // default
          .collection("s53sKFeF5FS0DjuI2cdO1Rp9sCS2") // uid
          .doc(idOfPlace); // id of place
    
        usersRef.get().then((docSnapshot) => {
          if (docSnapshot.exists) {
            this.setState({
              placeAlreadyScanned: true, // place is in user's database
            });
          } else {
            this.setState({
              placeAlreadyScanned: false, // place is NOT in user's database
            });
          }
        });
      }
      recordInGlobalDatabase(idOfPlace) {
        const usersRef = db
          .collection("databaseOfPlaces") // default
          .doc(idOfPlace); // id of place
    
        usersRef.get().then((docSnapshot) => {
          if (docSnapshot.exists) {
            this.setState({
              placeExistInDatabase: true, // place is in global database of places
            });
          } else {
            this.setState({
              placeExistInDatabase: false, // place is NOT in global database of places
            });
          }
        });
      }

Answer 1

代码的问题是 React 中的 setState 是异步的，并且您尝试在执行修改状态的函数后直接检查值。

假设您的方法运行良好并且执行了他们应该做的事情，您可以执行以下操作：

1. 让你的方法保持原样，修改状态。

2. 像现在一样调用saveScannedQRCode，触发两个辅助方法。

3. 您可以在 componentDidUpdate 生命周期挂钩中执行此操作，而不是在调用它们后立即检查状态。

    componentDidUpdate(prevProps, prevState) {
      if (prevState.placeExistInDatabase !== this.state.placeExistInDatabase && prevState.placeAlreadyScanned !== this.state.placeAlreadyScanned) {
        // do something here - at this point state is already updated and ready to use.
        // you could check for the values you're waiting for to update the DB, else not do anything.
      }
    }
   
     saveScannedQrCode(idOfPlace) {
       this.recordInUsersAccount(idOfPlace);
       this.recordInGlobalDatabase(idOfPlace);
     }
   

一件事 - 确保在处理更新后重置状态（例如，将其设置为 null），这样您的 componentDidUpdate 挂钩不会有任何问题，并且您的严格相等会很好。