map 不是在三元运算符中返回 div 的函数

Question

我正在尝试做一个小反应应用程序，为我自己的 UI 提取一些 uniswap 加密数据，只是为了好玩，我已经使用 graphql 查询获取了一些数据，我试图在它的条件下呈现它加载了我从功能组件中的三元运算符获得的。

当我尝试多种组合时，我只是得到allTokenData.map is not a function的错误

我已经在下面包含了我的组件，并且我已经注明了我的映射函数试图从我从 graphql 返回的数组中提取数据的位置，因为我正在获取数据，我确定我只是将某些东西与映射语法：/

这是我在控制台中获取的数据的 sn-p 以供参考，不胜感激

function CoinData(props) {

  //fetch whichever coin we want to add
  const NEWCOIN_QUERY = gql`
  query tokens($tokenAddress: Bytes!) {
    tokens(where: { id: $tokenAddress }) {
      derivedETH
      totalLiquidity
    }
  }
`;
  

  const { loading: ethLoading, data: ethPriceData } = useQuery(ETH_PRICE_QUERY);
  const { loading: allLoading, data: allTokenData } = useQuery(QUERY_ALL_TOKENS);
  const { loading: coinLoading, data: coindata } = useQuery(NEWCOIN_QUERY, {
    variables: {
      tokenAddress: props.parentState.newcoins!== '' ? props.parentState.newcoins.toString() : '0x6b175474e89094c44da98b954eedeac495271d0f',
    },
  });

  const coinPriceInEth = coindata && coindata.tokens[0].derivedETH;
  const coinTotalLiquidity = coindata && coindata.tokens[0].totalLiquidity;
  const ethPriceInUSD = ethPriceData && ethPriceData.bundles[0].ethPrice;
  console.log(props.parentState.newcoins)

  return (
    <div>
      <div>
        coin price:{" "}
        {ethLoading || coinLoading
          ? "Loading token data..."
          : "$" +
            // parse responses as floats and fix to 2 decimals
            (parseFloat(coinPriceInEth) * parseFloat(ethPriceInUSD)).toFixed(2)}
      </div>
      <div>
        Coin total liquidity:{" "}
        {coinLoading ? "Loading token data...": parseFloat(coinTotalLiquidity).toFixed(0)}
      </div>
      <div>
      </div>

            <div>
//////////////////////////////////////////----map function////////////////////////////
            {allLoading ? "Loading token data...": 

                  <div>
                        {allTokenData.map((token, index) => (
                          <p key={index}> {token.id} SYN: {token.symbol}</p>
                        ))}
                  </div>
            }
//////////////////////////////////////////----map function////////////////////////////
            </div>
    </div>
  );
}

Answer 1

也许是 allTokenData.tokens.map。

Answer 2

因为 allTokenData 是一个对象。

const {tokens} = allTokenData

{tokens.map((token, index) => (
                          <p key={index}> {token.id} SYN: {token.symbol}</p>
                        ))}