Reactjs 在单个blogpost模板中显示作者

通过从下面的

yaml

文件中获取数据，我成功地以编程方式创建了多个作者页面

数据/作者.yaml

- id: jane_doe 
  name: Jane Doe 
  twitter: jane_doe
  bio: Chillwave lumbersexual chicharrones tote bag. Brunch ethical tbh mustache authentic raclette green juice
- id: john_doe
  name: John Doe 
  twitter: john_doe
  bio: Tacos edison bulb you probably haven't heard of them, before they sold out letterpress poutine pinterest

博客帖子内容

---
title: "Heck Yeah Chillwave Heirloom"
author: ["jane_doe", "john_doe"]
---

一切都像我预期的那样顺利，但不知何故，我无法在我的单个博客帖子模板中显示作者自己

src/templates/blog.js

import React from 'react'
import { Link, graphql } from 'gatsby'
import { kebabCase } from 'lodash';
import Layout from '../layouts/layout'
import moment from 'moment' // momentjs


// query content
export const blogQuery = graphql `
    query($id: String!) {
        singleBlog: markdownRemark(
            id: {eq: $id}
            ) {
            id
            html
            frontmatter {
                title
                author {
                    id
                    name
                    twitter
                    bio
                }
            }  
        }
    }
`
const BlogPost = ({data: {singleBlog}}) => {
   return(
       <Layout>
           <h1>{singleBlog.frontmatter.author.name}</h1>
           <div className="authors">
                            {singleBlog.frontmatter.author.map(a=>
                            <span className="tag" key={a.name}>{a.name}</span>
                            )}
                        </div>
       </Layout>
   )
}
export default BlogPost

有什么建议吗

更新 事实证明，我必须将author映射为一个数组，所以我只需要更改渲染它的方式

<div className="authors">
    {singleBlog.frontmatter.author.map(a=>
       <span className="tag" key={a.name}>{a.name}</span>
    )}
</div>

{singleBlog.frontmatter.author.map（a=>
{a.name}
)}

---

它现在呈现性能

像这样访问singleBlog.markdownRemark.frontmatter.author[0]。name

实际上，您缺少markdownRemark，而且您不能直接放入类似author.name的内容，因为author是一个数组，所以您需要执行author[0]。命名或迭代author，如

singleBlog.markdownRemark.frontmatter.author.map（）

• 如何在javascript中访问对象
  singleBlog.markdownRemark.frontmatter.author
  • markdownRemark在singleBlog->中，所以像这样访问singleBlog.markdownRemark

  • frontmatter在markdownRemark->中，所以像这样访问singleBlog.markdownRemark.frontmatter

  • 作者在frontmatter->内，所以访问方式如下

    singleBlog.markdownRemark.frontmatter.author

毕竟作者是数组，所以迭代它

Json

反应码

class App extends React.Component {
  render() {
    let data = singleBlog.markdownRemark.frontmatter?singleBlog.markdownRemark.frontmatter.author:[];
    return (
      <div>
        {data.map(a=>
          <div key={a.name}>{a.name}</div>
          )}
      </div>
    );
  }
}

类应用程序扩展了React.Component{
render（）{
让data=singleBlog.markdownRemark.frontmatter？singleBlog.markdownRemark.frontmatter.author:[]；
返回(
{data.map（a=>
{a.name}
)}
);
}
}

GraphQL中的数据结构和代码看起来不同。你给你的

singleBlog

键添加了别名，以供参考。

markdownRemark

因为我是盖茨比的新手，你能详细说明一下吗？我在我的graphql中添加了相同的别名，结果是相同的，应该呈现给作者。@YudyAnanda检查一下，如果你需要帮助，请告诉我。@YudyAnanda，谢谢你的回答，你能详细解释一下上面的代码吗？我应该如何处理json以及如何将所有这些东西与我的singleblog模板集成在一起？没关系，我自己已经解决了。原来我有一个映射

{singleBlog.frontmatter.author.map（a=>{a.name}）}

。非常感谢你带领我走上正确的道路@YudyAnanda检查这个我更新了解释如何访问它。@YudyAnanda如果它对你有帮助，请接受/投票支持答案因为我有singleBlog作为markdownRemark的别名，我不需要调用markdownRemark，但你关于作者作为数组的看法是对的。谢谢你的解释。在本例中，我只更改如何将author作为数组调用

let singleBlog = {
    "markdownRemark": {
      "frontmatter": {
        "title": "Heck Yeah Chillwave Heirloom",
        "author": [
          {
            "id": "jane_doe",
            "name": "Jane Doe"
          },
          {
            "id": "john_doe",
            "name": "John Doe"
          }
        ]
      }
    }
}

class App extends React.Component {
  render() {
    let data = singleBlog.markdownRemark.frontmatter?singleBlog.markdownRemark.frontmatter.author:[];
    return (
      <div>
        {data.map(a=>
          <div key={a.name}>{a.name}</div>
          )}
      </div>
    );
  }
}