Gatsby无控制台及GraphQL报错时Blog标签文章列表不显示问题

页面不渲染和GraphQL、数组索引没有关系，是几个基础写法错误导致的：

• 外层wpPosts.map的回调函数没有返回值，内层遍历标签时return的JSX根本没有传递给渲染层，React拿不到可渲染节点自然出空白。控制台能打印出标签名，只是因为遍历执行到了console语句，和返回值链路无关。
• 字段取值路径错误：文章的title字段是wpPost的根级属性，你写的tag.title是去标签对象上取标题，但你的GraphQL查询里标签节点只查询了name字段，根本不存在title属性，就算渲染链路通了这里也拿不到正确内容。
• 列表结构不符合规范：<ul>的直接子元素只能是<li>，你在中间嵌套<div>属于无效HTML结构，会触发浏览器的容错解析，可能导致内容异常。
• 现有逻辑存在重复渲染bug：如果一篇文章同时挂载多个标签，遍历标签返回列表项的写法会把同一篇文章重复渲染多次。

GraphQL查询部分不需要改动，直接替换列表渲染的JSX即可：

<ul>
  {wpPosts.map(wpPost => {
    // 校验文章是否携带Blog标签
    const hasBlogTag = wpPost.tags.nodes.some(tag => tag.name === "Blog")
    if (!hasBlogTag) return null
    // 列表项必须加唯一key，用文章slug作为标识即可
    return <li key={wpPost.slug}>{wpPost.title}</li>
  })}
</ul>

内容的提问来源于stack exchange，提问作者Sa Lesanan