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

Question

我正在使用 Strapi 和 React 开发一个博客，博客中的文章有多个类别，我从 Strapi 得到一个 GraphQL 查询，就像这样

(blogpostObject){
  
  "categories": [
    {
      "name": "Category 1"
    },
    {
      "name": "Category 2"
    },
  ],
  
}

我想访问每个类别的“名称”值，并用逗号分隔显示它们，每一个都带有一个 <a> 标签和一个 link 到另一个页面。

到目前为止我只想到了这个解决方案

queryData.map(article => (
article.categories.map(category => category.name).toString().replace(/,/g, `, `)

这将呈现：“类别 1，类别 2”，但我不知道如何从此处向每个类别添加 <a> 标签。

编辑：我正在使用 Gatsby 来构建这个项目，所以我正在使用 React Link 组件来处理内部 links.

这是一个 GraphQL 响应示例

{
  "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"
            }
          ],
          "created_at": "Wednesday, June 24th 2020"
        }

Answer 1

你试过了吗

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

Answer 2

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

Answer 3

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;

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

Getting value of property of object inside an array inside another array

javascript

reactjs

graphql

strapi

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

Getting value of property of object inside an array inside another array

javascript

reactjs

graphql

strapi

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