React三元运算符内调用map报allTokenData.map is not a function求助

问题原因 #

allTokenData.map is not a function报错的核心原因是你调用map方法的allTokenData不是数组类型。
Apollo Client的useQuery返回的data字段是GraphQL查询的根响应对象，你需要的代币数组是这个对象下的子字段。就像你查询单个代币时通过coindata.tokens[0]取数据一样，全量代币查询QUERY_ALL_TOKENS的返回结果也包裹在根对象的对应字段下，通常这个字段名为tokens。

解决方法 #

1. 先确认你的QUERY_ALL_TOKENS的查询结构，如果你的查询写法如下：

query QUERY_ALL_TOKENS {
  tokens {
    id
    symbol
    # 其他你查询的字段
  }
}

那么你要遍历的数组是allTokenData.tokens，而非直接遍历allTokenData。
2. 修改你代码中map部分的逻辑，同时加空值兜底避免边界报错：

{allLoading ? "Loading token data...": 
  <div>
    {/* 替换原map逻辑，加可选链和空数组兜底 */}
    {(allTokenData?.tokens || []).map((token, index) => (
      <p key={token.id || index}> {token.id} 代码: {token.symbol}</p>
    ))}
  </div>
}

额外优化建议 #

• 优先用token.id作为遍历的key值，比index性能更好，也能避免列表变动时的渲染异常
• 加|| []兜底可以避免接口返回tokens字段为null/undefined时的同类型报错
• 如果修改后还是报错，可以先打印console.log(allTokenData)确认根对象下的实际字段名，和你写的查询字段保持一致即可。

内容的提问来源于stack exchange，提问作者luther wardle