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

Posted 2023-03-08

【中文标题】在另一个数组中的数组中获取对象的属性值

【英文标题】：Getting value of property of object inside an array inside another array

【发布时间】：2020-10-29 21:35:16

【问题描述】：

我正在使用 Strapi 和 React 开发博客，并且博客中的文章有多个类别，我从 Strapi 获得了这样的 GraphQL 查询

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

我想访问每个类别的“名称”值，并用逗号分隔它们，每个类别都带有 <a> 标记和指向另一个页面的链接。

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

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

这将呈现：“Category 1，Category 2”，但我不知道如何从这里将<a> 标签添加到它们中的每一个。

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

这是一个示例 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"
        

【问题讨论】：

您会发布来自您的 graphql API 的响应示例吗？您是否使用 React Router 在页面之间跳转，或者您的超链接应该指向完全不同的位置（如果是，每个链接的 URL 是什么）？

请注意，提供的两个答案都集中在制作超链接的 html 标记，这不是在 React 中正确完成的方式。

我已将 GraphQL 示例添加到帖子中。我正在使用 Gatsby 及其 Link 组件进行路由。这些链接将指向包含该类别中所有文章的页面。感谢您的回复。

【参考方案1】：

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;

【讨论】：

成功了！但由于某种原因，我不得不删除 node.categories.map() 之前的“return”，谢谢！

如果有多个类别，我如何用逗号分隔？

好的，我通过将所有内容包含在一个片段中并在其中添加一个带有逗号的跨度来得到逗号。

是的，我就是这样做的。我用一些逻辑添加了相同的内容，所以没有尾随逗号。

【参考方案2】：

你试过了吗

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

【讨论】：

这将呈现 [object Object]，我使用的是 React，所以这都是 jsx。感谢您的回复

【参考方案3】：

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

【讨论】：

这会将 标记呈现为纯文本。感谢您的帮助