I've been working on a cryptocurrency project for my portfolio and one thing I am having trouble doing is using lodash's debounce method with an api request when there needs to be an updated amount argument to be passed in. Here is what I mean:
const handleGetSwapPrice = useCallback(() => {
getSwapPrice(`${baseAsset}/${quoteAsset}`, transactionType, amountState.fromCurrencyAmount)
.then((res) => {
if (!res.price) {
setIsLoading(true);
} else {
setIsLoading(false);
}
setSwapPrice(res.price);
});
}, [baseAsset, quoteAsset, transactionType]);
Here is the code that uses, useCallback, which handles calling the api request. As you can see, there are required params that need to be passed in. Most importantly, amountState.selectedFromCurrency. However, there is an additional function that updates the amountState which is below:
const handleAssetAmount = (e) => {
const { value, name } = e.target;
const formattedAmount = handleAssetAmountFormat(value);
setAmountState({ ...amountState, [name]: formattedAmount });
if (name === 'fromCurrencyAmount') validateAmount(formattedAmount);
};
This function is being passed into the text field like so:
<TextField
inputRef={fromInputEl}
className={classes.assetTextField}
onChange={handleAssetAmount}
name="fromCurrencyAmount"
value={amountState.fromCurrencyAmount}
}} />
I am trying to debounce it but all the examples I could find through research were simple executions involving simple logic.
I tried following countless tutorials to get the amount state to update, but I am seeing an error in the console for the request, where the amount is still null even though I changed the amount in textfield.
Any help or guidance is really appreciated. Thanks!