How to wait until parameters are defined in order to make call

Kimbo 0
Viewed 29

I am building a React cryptocurrency project for my portfolio and im just trying to figure out how I can solve this issue where the api call is taking null parameters. As you might see, I am polling for data upon render of the component, however, I am seeing the error in the console that the parameters are null. I would like to have the api request wait until the parameters are actually not null to make the api request. Here is my code and the url that returns a null value for the currencies to be used:

/api/v1/private/quote?pair=null/null&side=BUY&amount=

  const baseAsset = transactionType === TRANSACTION_TYPES.BUY ? selectedCurrencyState.selectedToCurrency : selectedCurrencyState.selectedFromCurrency;
  const quoteAsset = transactionType === TRANSACTION_TYPES.SELL ? selectedCurrencyState.selectedToCurrency : selectedCurrencyState.selectedFromCurrency;



const handleGetSwapPrice = () => {
    const amountValue = TRANSACTION_TYPES.BUY ? amountState.fromCurrencyAmount : amountState.toCurrencyAmount;
    getSwapPrice(`${baseAsset}/${quoteAsset}`, transactionType, amountValue)
      .then((res) => {
        const formattedPrice = formatCurrency('USD', res.price);
        setSwapPrice(formattedPrice);
      });
  };

  useEffect(() => {
    if (isLoggedIn) {
      getSwapPairs()
        .then((res) => {
          setSwapInfo(res.markets);
          if (transactionType === TRANSACTION_TYPES.BUY) {
            setSelectedCurrencyState({ ...selectedCurrencyState, selectedFromCurrency: localStorage.getItem('fromCurrency') || 'USD', selectedToCurrency: 'BTC' || localStorage.getItem('toCurrency') });
          }
          setTransactionType(localStorage.getItem('transactionType', transactionType) || TRANSACTION_TYPES.BUY);
        });

      const timer = setInterval(handleGetSwapPrice, 6000);
      return () => clearInterval(timer);
    }
  }, []);

Any help is appreciated. Thanks!

rest react-native asynchronous reactjs javascript
1 Answers

You can use useMemo or useCallback (preferred useCallback) for that handleGetSwapPrice function.

Like this:

const handleGetSwapPrice = useCallback(() => {
  const amountValue = TRANSACTION_TYPES.BUY ? amountState.fromCurrencyAmount : amountState.toCurrencyAmount;
  getSwapPrice(`${baseAsset}/${quoteAsset}`, transactionType, amountValue)
    .then((res) => {
      const formattedPrice = formatCurrency('USD', res.price);
      setSwapPrice(formattedPrice);
    });
}, [baseAsset, quoteAsset, transactionType, amountState]);

And since you call that function from useEffect, you need to make those variables dependencies for it:


useEffect(() => {
  if (isLoggedIn && baseAsset && quoteAsset) {
    getSwapPairs()
      .then((res) => {
        setSwapInfo(res.markets);
        if (transactionType === TRANSACTION_TYPES.BUY) {
          setSelectedCurrencyState({ ...selectedCurrencyState, selectedFromCurrency: localStorage.getItem('fromCurrency') || 'USD', selectedToCurrency: 'BTC' || localStorage.getItem('toCurrency') });
        }
        setTransactionType(localStorage.getItem('transactionType', transactionType) || TRANSACTION_TYPES.BUY);
      });

    const timer = setInterval(handleGetSwapPrice, 6000);
    return () => clearInterval(timer);
  }
}, [baseAsset, quoteAsset]);
Anas Latique0
Related