Javascript 如何在地图功能中使用useEffect？

我在Firebase有两张桌子：代金券和ClaimedVoucher。我试图显示ClaimedVouchers表中未显示的凭单。因此，我有一个查询获取所有凭证，然后另一个查询检查凭证是否已声明，以及是否声明，函数应返回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];

    
 

然后在我的主要功能中：

 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>
 );

var user=Firebase.auth（）.currentUser；
var uid=user.uid；
const[GetDictionals，voucherList，errorMessage]=getVouchersAPI（ID）//要检查的凭证列表
const[isClaimed]=isClaimedAPI（）；
返回(
{voucherList.map（（项，索引）=>{
var凭证=项目；
var isVoucherClaimed=isClaimed（凭证.voucherID，uid）；
log（“这是结果，”，isvoucher声明）；
如果(
isVoucherClaimed==false
) {
返回{item.name}
}
})}
);

---

现在什么也没发生，我收到了以下警告：[未处理的承诺拒绝：FirebaseError:函数查询。where（）需要有效的第三个参数，但它未定义。]但我认为这与问题无关。

您的

被调用
是一个
异步
函数，这意味着它返回一个承诺——或者一个延迟的结果。如果要在调用isClaimed时等待结果，则需要使用
wait
：

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

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

因此，您需要的设置是：


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

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





您的
isClaimed
是一个
async
函数，这意味着它返回一个承诺或延迟结果。如果要在调用isClaimed时等待结果，则需要使用
wait
：

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

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

因此，您需要的设置是：


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

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





仅强调如何使用isClaimed as hook并设置调用其中异步函数的状态。稍后在react组件中使用上述挂钩。请按照下面的方框

仅强调如何使用isClaimed as hoook并设置调用其中异步函数的状态。稍后在react组件中使用上述挂钩。请按照下面的方框

您似乎没有在开发的customhook isClaimedAPI中使用状态。请在isClaimedAPIHi中使用结果作为状态，我已更新以将结果存储在状态中-我已编辑了我的初始注释-请您再次查看它好吗？现在还有其他问题。不要在异步函数中设置state，只需从中返回结果即可。在useEffect内部，尝试`isClaimed（）。然后（（result）=>setResult（result））`啊，我明白你的意思了。然而，我觉得我还是做错了什么。我不确定isClaimed将如何访问主程序范围内的setResult钩子？我在回答中给出了一个codesandox，请遵循如何在自定义钩子中使用setState从异步函数获取数据您似乎没有使用您开发的customhook isClaimedAPI中的状态。请在isClaimedAPIHi中使用结果作为状态，我已更新以将结果存储在状态中-我已编辑了我的初始注释-请您再次查看它好吗？现在还有其他问题。不要在异步函数中设置state，只需从中返回结果即可。在useEffect内部，尝试`isClaimed（）。然后（（result）=>setResult（result））`啊，我明白你的意思了。然而，我觉得我还是做错了什么。我不确定isClaimed将如何访问主程序范围内的setResult钩子？我在回答中给出了一个codesandox，请遵循如何在自定义钩子中使用setState从异步函数获取数据HI，我已更新以将结果存储在状态中-我已编辑了我的初始评论-请您再看一遍好吗？现在还有其他问题。请不要以这种方式修改您的问题，因为现在问题和答案之间存在不匹配。由于您采用了我推荐的方法，您现在遇到了不同的问题。请将您的问题回滚到原始问题，并针对新问题发布一个新问题，以便（可能是其他人）可以提供帮助/您好，我已更新以将结果存储在状态中-我已编辑了我的初始评论-请您再看一次好吗？现在还有其他问题。请不要以这种方式修改您的问题，因为现在问题和答案之间存在不匹配。由于您采用了我推荐的方法，您现在遇到了不同的问题。请将您的问题回滚到原始问题，并针对新问题发布一个新问题，以便（可能其他人）可以提供帮助/您好，谢谢您的示例。我已经试着按照你所做的做了，我已经编辑了我的原始评论，如果你能看一看的话-非常感谢你的帮助。@kiermcguirk我仍然认为原始问题没有在钩子中实现useState。嗨，谢谢