React Native 等待函数完成后再继续

Question

我有以下代码：

const DuellScreen = () => {
...
 const [code, setCode] = useState("");
 const [keyExisting, setExi] = useState(true);
...
return (
...
 <BlockButton
                text="Apply"
                onPress={() => {
                  keyExists(code, setExi)
                  if (keyExisting == true) {
                    Alert.alert("Game joined");
                  } else if (keyExisting == false) {
                    Alert.alert(
                      "Game does not exist or someone has already joined"
                    );
                  }
                }}
              />
...)

我的函数 keyExists 正在使用 firebase/firestore，因此可能需要一段时间才能更新 keyExisting。 这导致我的 if 语句的错误结果。 这也是一个标志，即第一次按下按钮时，if 语句始终为“真”，因为那是初始状态。如果我将初始状态更改为“false”，则第一次单击按钮后 if 语句的结果始终为“false”。 所以第一次点击按钮始终是初始状态（useState），但应该在if语句之前更新...

如果需要，这也是我的 keyExists 函数：

export const keyExists = (setKey, keyExi) => {
  duettsRef
    .where("key", "==", setKey)
    .where("player1", "!=", firebase.auth().currentUser.uid)
    .where("player2", "==", "")
    .limit(1)
    .get()
    .then((querySnapshot) => {
      keyExi(!querySnapshot.empty);
      if (!querySnapshot.empty) {
        querySnapshot.docs[0].ref.update({
          player2: firebase.auth().currentUser.uid,
        });
      }
    })
    .catch((e) => console.log(e));
};

我做错了什么？

Answer 1

我认为你在这里混合了几件事。

firebase SDK 是异步的，因此您调用的函数会返回一个承诺。 使用 Promise 有两种方法，可以将它与 .then .catch 语句一起使用，也可以在带有关键字 await 的异步函数中使用它。

您的代码正在做一些非常奇怪且可能错误的事情：您正在为您的 keyExists 函数提供来自 useState 钩子的设置器，并且您希望在调用您的 keyExists 后直接使用此值，这是不可能的。 您的语句if (keyExisting == true) 将在您的代码到达.then((querySnapshot) 之前执行。

const [keyExisting, setExi] = useState(true); 此处的钩子为您提供了一个值和一个 setter，当您使用 setExi setter 时，您正在做两件事：1- 为下一次渲染设置 keyExisting 的值 2- 触发新的渲染你的组件。如果您有一个调用setExi 然后使用keyExisting 的函数，它在设置新值之前仍将具有先前的值。

你可以这样做：

const DuellScreen = () => {
...
 const [code, setCode] = useState("");
 const [keyExisting, setExi] = useState(true);
...
return (
...
 <BlockButton
                text="Apply"
                onPress={async () => {
                  try {
                    const exist = await keyExists(code);
                    if (exist == true) {
                      Alert.alert("Game joined");
                    } else if (keyExisting == false) {
                      Alert.alert(
                        "Game does not exist or someone has already joined"
                      );
                    }
                  } catch(e) {
                    console.log(e)
                  }
                }}
              />
...)

export const keyExists = (setKey, keyExi) => {
  return duettsRef
    .where("key", "==", setKey)
    .where("player1", "!=", firebase.auth().currentUser.uid)
    .where("player2", "==", "")
    .limit(1)
    .get()
    .then((querySnapshot) => {
      
      if (!querySnapshot.empty) {
        querySnapshot.docs[0].ref.update({
          player2: firebase.auth().currentUser.uid,
        });
      }

      return (!querySnapshot.empty);
    })
    .catch((e) => console.log(e));
};

但是您可能应该将您的 keyExists 拆分为两个函数：一个仅告诉您您的密钥是否存在，另一个用于更新您的 firestore 数据库。 另一件可能值得做的事情是使用某种活动指示器来锁定您的按钮，知道您的用户可以多次点击您的按钮，每次点击都会触发对您的 keyExists 函数的新调用。