Как использовать useEffect внутри функции карты? - PullRequest
Новая
       9

Как использовать useEffect внутри функции карты?

0 голосов
/ 01 августа 2020

У меня есть две таблицы в Firebase: Vouchers и ClaimedVouchers. Я пытаюсь отобразить ваучеры, которых нет в таблице Заявленные ваучеры. Итак, у меня есть запрос, который получает все ваучеры, затем еще один, который проверяет, заявлены ли они, и если заявлены они или нет, функция должна возвращать либо истину, либо ложь:

Это 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>
 );

Теперь ничего не происходит, и я получаю следующее предупреждение: [Отклонение необработанного обещания: FirebaseError: Функция Query.where () требует допустимый третий аргумент, но он не был определен.], но я думаю, что это не связано с проблемой.

Ответы [ 2 ]

2 голосов
/ 01 августа 2020

Ваш isClaimed - это функция async, что означает, что она возвращает обещание или отложенный результат. Если вы хотите дождаться результата при вызове isClaimed, вам нужно будет использовать await: 

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

Это, скорее всего, невозможно в методе рендеринга, поэтому ( как прокомментировал Asuto sh) вам нужно будет сохранить результат в состоянии, а затем использовать состояние в вашем методе рендеринга.

Итак, вам нужна следующая настройка:

  • Начните загрузку всех ваших данных в componentDidMount или с useEffect.
  • Когда данные загружены, поместите их в состояние с помощью setState или обработчика состояния.
  • Используйте данные в своем методе рендеринга.

Несколько примеров см. В:

0 голосов
/ 01 августа 2020

Просто чтобы подчеркнуть, как вы можете использовать isClaimed в качестве ловушки и установить состояние, вызывая внутри него функцию asyn c. Позже используйте вышеуказанный хук в компоненте реакции. Пожалуйста, следуйте ниже sanbox.

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

...