i have an error about object manipulation-CodePudding

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

CodePudding user response：

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([{}])

CodePudding user response：

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)