i have an error about object manipulation

Question

good morning everyone, i get errors in a simple manipulation of a json. I'll show you the code:

import React, {useState, useEffect} from 'react';
import Bscpricequery, {TOKEN_QUERY, bitquery} from './bscpricequery';
import Viewcoinbsc from '../../component/page/Viewcoinbsc';


function Apipricebsc() {

const [pricecontract, setPricecontract]= useState([""])

    useEffect(() => {
fetch(bitquery,{
    method: "POST",
    headers: {"content-type": "application/json",
    "X-API-KEY": "XXX"},
    body: JSON.stringify({query: TOKEN_QUERY })
}). then(response => response.json() )
.then (data => setPricecontract(data.data.ethereum.list1))
.catch(console.error);

    }, [] );
    //console.log(pricecontract)
// const listTokenBsc = pricecontract.filter((listtokenbsc) => console.log(listtokenbsc) );
 // console.log ("filtrato", listTokenBsc)
    
  return (
    <div>
      

      { pricecontract.map((listtokenbsc)=>{
        return console.log(listtokenbsc);
        
      } )}
    </div>
  )
}

export default Apipricebsc;

in the last line there is the console.log () with the console.log (listtokenbsc), I calmly receive the items, I only show you 1

baseCurrency: {address: '0xe9e7cea3dedca5984780bafc599bd69add087d56', symbol: 'BUSD', name: 'BUSD Token'}
block: {height: 17790981, timestamp: {…}}
quoteAmount: 7743.606417144352
quoteCurrency: {address: '0x55d398326f99059ff775485246999027b3197955', symbol: 'USDT', name: 'Tether USD'}
quotePrice: 1.006419563656451
tradeAmount: 7700.600459087681
tradeIndex: "9"
trades: 1
[[Prototype]]: Object

with the console.log (listtokenbsc.baseCurrency), it works as well and I get the data

{address: '0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82', symbol: 'Cake', name: 'PancakeSwap Token'}
address: "0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82"
name: "PancakeSwap Token"
symbol: "Cake"
[[Prototype]]: Object

instead with the console.log (listtokenbsc.baseCurrency.name) or console.log (listtokenbsc.baseCurrency.address) I get the error "Uncaught TypeError: Cannot read properties of undefined (reading 'name')"

i can't understand why i have this problem. can you help me? THK

score 0 · Answer 1 · answered May 14 '22 at 09:28

0

You could try this: console.log(listtokenbsc.baseCurrency[address]) If that doesn't work, you can do it like this:

Var x = listtokenbsc.baseCurrency;
console.log(x.address)

answered May 14 '22 at 09:28

Jan Arend

284
2
17

Jan Arend, nothing to do does not work – raziel90 May 14 '22 at 09:37
What if you try logging it to the console inside the useEffect hook? – Jan Arend May 14 '22 at 09:47
And otherwise maybe look at this https://stackoverflow.com/questions/38660832/console-log-of-element-children-shows-0-length-but-has-three-entries-when-expand – Jan Arend May 14 '22 at 09:52

Dmitriy Zhiganov · Accepted Answer · 2022-05-14T10:12:51.347

0

It happens because at first render you don't have an object in state and the error just stops the code execution. Remember that useEffect is happens after the first render. listtokenbsc is a string initially (look at the default state value).

Probably, the result of console.log(listtokenbsc.baseCurrency) is what you have in listtokenbsc after a successful fetching (in that way error didn't happen).

So, you have a few options on how to fix that:

// 1
if (typeof listtokenbsc === 'object' && 'name' in listtokenbsc) {
  console.log(listtokenbsc.name)
}

// 2
console.log(listtokenbsc?.baseCurrency?.name)

// 3
const [pricecontract, setPricecontract]= useState([{}])

edited May 14 '22 at 10:12

answered May 14 '22 at 10:06

Dmitriy Zhiganov

1,060
1
5
14

thanks Dmitrij Ziganov, I tried the second option, but explain to me what is that (?)? – raziel90 May 14 '22 at 10:41
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining – Dmitriy Zhiganov May 14 '22 at 11:02

i have an error about object manipulation

2 Answers2