Relatively new to React/Javascript in general so any help would be appreciated.

I currently have an application which is fetching data for multiple items from an API. buys is a list of dictionaries(called buy here) with fields asset, units and price (among other things).

buys.map(async buy => {
    var data = await queryCoinGeckoAPI(buy);

    var market_price = data.market_data.current_price.aud;
    var price_change = data.market_data.price_change_24h_in_currency.aud;
    var price_change_percentage = data.market_data.price_change_percentage_24h_in_currency.aud;
    var profit = buy.units === 0 || buy.price === 0 ? 0 : market_price * buy.units - buy.price;

    newDictionary[buy.asset] = {
        asset: buy.asset,
        market_price: market_price,
        price_change: price_change,
        price_change_percentage: price_change_percentage,
        profit: profit
    };
});

That's all fine and when I come to log newDictionary:

Hooray it works!

However, the problem comes when I'm not trying to access these values in the dictionary. If I try calling newDictionary['bitcoin'] or Object.keys(newDictionary) or even

for(let key in newDictionary) {
    console.log(key);
    console.log(newDictionary[key]);
}

for example I get no output.

Undefined returned

Not particularly sure why and couldn't find an answer on this online...

I chose a dictionary because I would like to be able to update my current state (I hope this is how you use the spread operator):

setBuys(
    buys.map(b => {
        {...b, ...newDictionary[b.asset]};
    })
);

Full function in case you need it :

useEffect(() => {
    const refreshData = async() => {
        var d = await Promise.all(
            buys.map(async buy => {
                var data = await queryCoinGeckoAPI(buy);

                var market_price = data.market_data.current_price.aud;
                var price_change = data.market_data.price_change_24h_in_currency.aud;
                var price_change_percentage = data.market_data.price_change_percentage_24h_in_currency.aud;
                var profit = buy.units === 0 || buy.price === 0 ? 0 : market_price * buy.units - buy.price;

                return {
                    asset: buy.asset,
                    market_price: market_price,
                    price_change: price_change,
                    price_change_percentage: price_change_percentage,
                    profit: profit
                };
            })
        )

        var newDictionary = {};
        for (let i = 0; i < d.length; i  ) {
            newDictionary[d[i].asset] = d[i];
        }

        console.log(newDictionary);
            
        setBuys(
            buys.map(
                b => {
                    {...b, ...newDictionary[b.asset]}
                }
            )
        )

        // toast.info('Market updated', {});
    }
    const interval = setInterval(() => {
        refreshData();
      }, 60000);
    return () => clearInterval(interval);
})

Thanks!

CodePudding user response：

(I'm not even sure if dictionaries are a thing in React).

You are probably thinking of objects, perhaps that can help you with googling anything related in the future.

I think the spread operator is the culprit here, try replacing it with this (forgive the formatting): .maps( b => {{b: newArray[b.asset]}}

Try adding to some log statements to see the acual contents of newArray, maybe it is actualy an object instead of an array.

CodePudding user response：

The problem with your final setBuys call is that you're simply not returning anything from the mapper function since it's using {} braces.

You'll want

setBuys(
  buys.map(
    b => (
      {...b, ...newDictionary[b.asset]}
    )
  )
)

instead (b => (, not b => {).