如何在地图功能内使用useEffect? [英] How to use useEffect inside map function?

问题描述

我在Firebase中有两个表:凭证&已领取代金券.我正在尝试显示没有出现在ClaimedVouchers表中的凭单.因此，我有一个查询，该查询获取所有凭证，然后另一个查询，以检查是否已领取凭证，以及是否已领取该功能，该函数应返回true或false:

I have two tables in Firebase: Vouchers & ClaimedVouchers. I am trying to display the vouchers that do not appear in the ClaimedVouchers table. So, I have a query that gets all of the vouchers, then another that checks if they're claimed and if it's claimed or not the function should return either true or false:

这是isClaimedAPI.js

This is isClaimedAPI.js

    export default () => {
      var result;
    
      async function isClaimed(voucher, user) {
        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(result, "this is result");

  return result;
      //Call when component is rendered
      useEffect(() => {
        isClaimed().then((result) => setResult(result));
      }, []);
    
      return [isClaimed];

    
 

然后在我的主要功能中:

And then in my main function:

 var user = Firebase.auth().currentUser;
    var uid = user.uid;
    const [getVouchers, voucherList, errorMessage] = getVouchersAPI(ID); //List of vouchers to be checked
    const [isClaimed] = isClaimedAPI();
    
    
    return(
<ScrollView>
    {voucherList.map((item, index) => {
              var voucher = item;
              
              var isVoucherClaimed = isClaimed(voucher.voucherID, uid);
              console.log("this is result, ", isVoucherClaimed);
              if (
                isVoucherClaimed === false
              ) {
                  return <Text>{item.name}<Text>
                }
    })}
  </ScrollView>
 );

现在什么也没有发生，我收到以下警告:[未处理的承诺被拒绝:FirebaseError:函数Query.where()需要一个有效的第三个参数，但它是未定义的.]但是，我认为这与问题无关.

Now nothing happens and I receive the following warning: [Unhandled promise rejection: FirebaseError: Function Query.where() requires a valid third argument, but it was undefined.] but I think this is unrelated to the issue.

推荐答案

您的 isClaimed 是一个 async 函数，表示它返回了诺言-或延迟了结果.如果要在调用 isClaimed 时等待结果，则需要使用 await :

Your isClaimed is an async function, meaning that it returns a promise - or a delayed result. If you want to wait for the result when calling isClaimed, you'll need to use await:

await isClaimed(voucher.voucherID, uid);
console.log(result);

但是，这很可能在render方法中是不可能的，这就是为什么(如Asutosh所述)您必须将结果存储在状态中，然后在render方法中使用状态.

This most likely isn't possible in a render method though, which is why (as Asutosh commented) you'll have to store the result in the state, and then use the state in your render method.

所以您需要的设置是:

• 开始使用 componentDidMount 或使用 useEffect 加载所有数据.
• 加载数据后，使用 setState 或状态挂钩将其置于状态.
• 在渲染方法中使用数据.

• Start the loading of all your data in componentDidMount or with useEffect.
• When the data is loaded, put it in the state with setState or a state hook.
• Use the data in your render method.

有关此示例，请参见:

• 具有onAuthStateChanged的Firebase交换机标头选项
• React + Firestore:从查询
• 如何在react + firestore中呈现异步数据?

这篇关于如何在地图功能内使用useEffect?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！