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

Question

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

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

的错误

我在下面包含了我的组件，并且我在我的映射函数试图从我从 graphql 返回的数组中提取数据的位置做了标记，因为我正在获取数据，所以我确定我只是在混淆一些东西使用映射语法：/

这里是我在控制台中记录的用于参考的数据片段，如有任何帮助，我们将不胜感激

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>
                        ))}

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

map is not a function returning div inside ternary operator

javascript

reactjs

conditional-operator