Javascript 获取另一个数组中数组内对象的属性值

我正在使用Strapi和React开发一个博客，博客中的文章有多个类别，我从Strapi得到一个GraphQL查询，如下所示

（blogpostObject）{
“类别”：[
{
“名称”：“类别1”
},
{
“名称”：“第2类”
},
],
}

我想访问每个类别的“name”值，并用逗号分隔显示它们，每个类别都有一个

标记，并带有指向另一个页面的链接

到目前为止，我只提出了这个解决方案

queryData.map（article=>(
article.categories.map（category=>category.name）.toString（）.replace（/，/g，`，`）

这将呈现：“Category 1，Category 2”，但我不知道如何从这里将

标记添加到它们中的每一个

编辑：我使用盖茨比来构建这个项目，所以我使用React链接组件来处理内部链接

这是一个示例GraphQL响应

{
“数据”：{
“所有战略物品”：{
“节点”：[
{
“标题”：“这是我的第二篇文章”，
“slug”：“这是我的第二篇文章”，
“内容”：“Lorem ipsum dolor sit amet，Concetetur adipiscing Elite.”，
“id”：“第2条”，
“作者”：{
“姓名”：“普通乔”
},
“类别”：[
{
“名称”：“类别1”
}
],
“创建于”：“2020年6月24日星期三”
}

你试过了吗

article.categories.map(category => <a href='#'>{category.name}</a>)

article.categories.map（category=>）

queryData.map（文章=>(
article.categories.map（category=>“”）。toString（）。替换（/，/g，``

从“React”导入React；
//该数据将来自graphql
常数数据={
所有条款：{
节点：[
{
标题：“这是我的第二篇文章”，
slug：“这是我的第二篇文章”，
内容：“Lorem ipsum dolor sit amet，奉献精英。”，
id:“第2条”，
作者：{
姓名：“普通乔”
},
类别：[
{
名称：“1类”
},
{
名称：“第2类”
},
{
名称：“第3类”
}
],
创建于：“2020年6月24日星期三”
}
]
}
};
常量应用=（）=>{
返回(
{data.allStrapiArticle.nodes.map（node=>{
返回node.categories.map（（类别，索引）=>{
返回(
{index

---

您会发布graphql API的响应示例吗？您是使用React Router在页面之间切换，还是您的超链接应该指向完全不同的位置（如果是，每个链接的URL是什么）？请注意，提供的两个答案都集中在超链接的HTML标记上，这不是React中正确完成的方式。我已经在文章中添加了GraphQL示例。我正在使用Gatsby及其链接组件进行路由。链接将指向包含该类别中所有文章的页面。感谢您的回复。这将render[object object]，我使用的是React，所以这都是jsx。感谢您的回复。这将标记呈现为纯文本。感谢您的帮助它工作了！但由于某种原因，我不得不删除node.categories.map（）之前的“return”，谢谢！还有，如果有多个类别，我如何用逗号分隔？好的，我是通过将所有内容都包含在一个片段中并添加一个带有逗号的span来获得逗号的。是的，我就是这样做的。我添加了相同的逻辑，因此没有尾随逗号。

queryData.map(article => (
article.categories.map(category => "<a href='#'>" + category.name + "</a>").toString().replace(/,/g, `, `

import React from "react";

// this data would come from graphql instead
const data = {
  allStrapiArticle: {
    nodes: [
      {
        title: "This is my second article",
        slug: "this-is-my-second-article",
        content: " Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        id: "Article_2",
        author: {
          name: "Average Joe"
        },
        categories: [
          {
            name: "Category 1"
          },
          {
            name: "Category 2"
          },
          {
            name: "Category 3"
          }
        ],
        created_at: "Wednesday, June 24th 2020"
      }
    ]
  }
};

const App = () => {
  return (
    <div>
      {data.allStrapiArticle.nodes.map(node => {
        return node.categories.map((category, index) => {
          return (
            <>
              <a href="/">{category.name}</a>
              {index < node.categories.length - 1 && ", "}
            </>
          );
        });
      })}
    </div>
  );
};

export default App;