map function里面如何使用useEffect？

Question

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

这是 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];

    
 

然后在我的主要 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>
 );

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

Answer 1

您的isClaimed是async function，这意味着它返回 promise - 或延迟结果。 如果您想在调用isClaimed时等待结果，则需要使用await ：

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

不过，这很可能在渲染方法中是不可能的，这就是为什么（正如 Asutosh 评论的那样）您必须将结果存储在 state 中，然后在渲染方法中使用 state。

所以你需要的设置是：

• 在componentDidMount或使用useEffect开始加载所有数据。
• 加载数据后，将其放入带有setState或 state 挂钩的 state 中。
• 在您的渲染方法中使用数据。

有关这方面的一些示例，请参见：

• Firebase 开关 header 选项与 onAuthStateChanged
• React + Firestore：从查询中返回一个变量
• 如何在 react + firestore 中呈现异步数据？

Answer 2

只是为了强调如何使用 isClaimed 作为钩子并在其中设置 state 调用异步 function 。 稍后在反应组件中使用上述钩子。 请按照下面的 sanbox。

https://codesandbox.io/s/confident-cray-4g2md?file=/src/App.js