javascript - 如何根据firebase查询的结果有条件地返回一些东西？

Question

我在 Firebase 中有两张表：Vouchers 和 ClaimedVouchers。我正在尝试显示未出现在 ClaimedVouchers 表中的凭证。所以，我有一个获取所有凭证的查询，然后是另一个检查它们是否被认领以及是否被认领的函数应该返回 true 或 false：

这是 isClaimedAPI.js - 检查凭证是否在 ClaimedVoucher 表中 - 返回 true/false

export default (voucher, user) => {
  const [result, setResult] = useState(false);

  async function isClaimed() {
    var db = Firebase.firestore();
    console.log("voucher");
    await db
      .collection("ClaimedVoucher")
      .where("voucherID", "==", voucher)
      .where("userID", "==", user)
      .get()
      .then(function (querySnapshot) {
        if (querySnapshot.empty === false) {
          result = true;
        } else {
          result = false;
        }
      })
      .catch(function (error) {
        console.log("Error getting documents: ", error);
      });
    console.log("This is result: ", result);
    return result;
  }

  useEffect(() => {
    isClaimed().then((result) => setResult(result));
  }, []);

  return result;
};

查询工作正常，我可以从中获取我想要的值。

在我的主要功能中，我首先获取要检查它们是否已领取的凭证列表并将它们存储在列表中。然后我使用一个 map 函数来返回那些没有被认领的。这就是我的问题出现的地方，如何根据 firebase 查询的结果返回尚未声明的凭证的 jsx？

var user = Firebase.auth().currentUser;
    var uid = user.uid;
    const [getVouchers, voucherList, errorMessage] = getVouchersAPI(ID); //List of vouchers to be checked
  
    return(
<ScrollView>
    {voucherList.map((item, index) => {
              var voucher = item;

              var isVoucherClaimed = isClaimedAPI(voucher.voucherID, uid);
              if (
                isVoucherClaimed === false
              ) {
                  return <Text>{item.name}<Text>
                }
    })}
  </ScrollView>
 );

目前，我收到错误消息“渲染的钩子比以前的重新渲染更多”，老实说，我完全坚持这一点。我尝试了许多不同的途径来尝试解决这个问题，但我似乎无法让它工作 - 我知道使用 async / await / useEffect 但似乎仍然无法让它工作。如果有人有答案，将不胜感激。

标签： javascriptreactjsfirebasereact-nativegoogle-cloud-firestore