Question

我的代码同步有问题，我的程序在第二次按下按钮时有反应，因为它应该在第一次按下按钮时有反应。（底部有详细解释）。

我有以下 Firebase API 函数：

export const noOpponent = (Key, setOpponent) => {
  console.log("key: " + Key)
  duettsRef
    .where("key", "==", Key)
    .where("player1", "!=", firebase.auth().currentUser.uid)
    .where("player2", "==", "")
    .limit(1)
    .get()
    .then((querySnapshot) => {
     setOpponent(!querySnapshot.empty)
     console.log("QuerysnapshotResult: " + !querySnapshot.empty)
      })
};

现在我得到了另一个 .js 文件，其中包含以下代码（已缩短）：

 const DuellScreen = () => {
     const [opponent, setOpponent] = useState(null);
     return (
...
       <BlockButton
                    text="Apply"
                    onPress={() => {
                      noOpponent(code, setOpponent);
                      console.log("OPPONENT:" + opponent),
                      opponent ? (
                         opponent == true?(
                             setKeyToDuett(code),
                              Platform.OS === "android"?(
                                ToastAndroid.show("Game joined!", ToastAndroid.SHORT)):
                                (Alert.alert("Game joined!"))
                          ):(
                            Platform.OS === "android"?(
                              ToastAndroid.show("Game does not exist or someone else has already joined!", ToastAndroid.SHORT)):
                              (Alert.alert("Game does not exist or someone else has already joined"))
                          )
                          ):(
                        console.log("opponent is probably null")
                      )}
                  }  
                    />
...
)

现在第一次按下我的按钮，我会打印出以下几行：

OPPONENT:null
opponent is probably null
QuerysnapshotResult: true

第二次按下按钮，我得到：

OPPONENT:true
QuerysnapshotResult: true

第二次按下按钮的结果，是我预期的第一次按下按钮的结果...... 我认为，在调用 noOpponent(code, setOpponent); 后，它只是立即跳到下一行 (opponent ? (...，对手仍然为空，因为它没有等待 opponent 的结果/更改1}}。在第二个按钮上按下它然后设置为真，因为第一个按钮按下。它在 noOpponent function

之前打印出 console.log("OPPONENT:" + opponent)

如何正确同步，我的程序正在等待 console.log("QuerysnapshotResult: " + !querySnapshot.empty) 函数的结果，该函数正确设置了 noOpponent 然后跳转到此行 opponent (

Answer 1

你需要使用异步方法或Promise，试试吧

export const noOpponent = (Key, setOpponent) => {
console.log("key: " + Key)
duettsRef
    .where("key", "==", Key)
    .where("player1", "!=", firebase.auth().currentUser.uid)
    .where("player2", "==", "")
    .limit(1)
    .get()
    .then((querySnapshot) => {
        setOpponent(!querySnapshot.empty)
        console.log("QuerysnapshotResult: " + !querySnapshot.empty)
    })

};

然后是 onPress 按钮。

onPress={async () => {
    await noOpponent(code, setOpponent);
    console.log("OPPONENT:" + opponent),
    opponent ? (
        opponent == true ? (
              setKeyToDuett(code),
              Platform.OS === "android"?(
              ToastAndroid.show("Game joined!", ToastAndroid.SHORT)):
              (Alert.alert("Game joined!"))
        ):(
              Platform.OS === "android"?(
                  ToastAndroid.show("Game does not exist or someone else has already joined!", ToastAndroid.SHORT)):
                  (Alert.alert("Game does not exist or someone else has already joined"))
          )
      ):(
          console.log("opponent is probably null")
    )}
}

onpress 等待一个函数完成，然后在 React Native 中继续

1 个答案: