Как я могу получить значения массивов в списке элементов, используя Gatsby JS? - PullRequest
Новая
       5

Как я могу получить значения массивов в списке элементов, используя Gatsby JS?

0 голосов
/ 10 апреля 2020

Для каждого поста в этом блоге есть массив для категорий и тегов, которые должны отображаться как метаинформация для читателя. Дело в том, что я не справляюсь с этим правильно.

Я пытался сопоставить эти массивы с этим кодом: 

<ul>
  {frontmatter.map(({ categories }, i )=> (
     <li>
        <Link 
          className={`
            (...tailwind classes...)
          `} 
           key={i} 
           to={categories}>
          {categories}
        </Link>
      </li>
  ))}
</ul>

Хотя терминал показывает мне это сообщение об успехе ... Terminal

... браузер сообщает мне TypeError: frontmatter.map is not a function. Browser results

Полагаю, я неправильно понял функцию карты, но читая об этом, я не могу справиться с тем, чтобы она работала.

Запрос такой: 

export const pageQuery = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      fields {
        slug
      }
      frontmatter {
        date(formatString: "DD MMMM YYYY")
        path
                title
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
                type
                categories
                tags                
      }
    }
  }
`

Возвращается, как и ожидалось: GraphQL results

Кроме того, для каждой категории есть страница, где отображаются ее сообщения. Их слизни / категории / [имя-категории] . Итак, в приведенном выше коде для их отображения мне, вероятно, потребуется установить Link to="/categorias/${categories}" или что-то в этом роде. Не уверен, о чем, но поскольку я даже не получаю список с простыми именами, это еще одна проблема. Любая помощь будет высоко ценится.

Это блогпост. js в его полном содержании.

1 Ответ

1 голос
/ 10 апреля 2020

Ваш ответ на запрос имеет следующую форму: 

"data": {
  "markdownRemark": {
    // ...
    "frontmatter": {
      "date": "...",
      "path": "...",
      "categories": [
        "cat-a",
        "cat-b"
      ]
    }
  }
}

Вы не можете отобразить на frontmatter, потому что это не итератор. Подробнее в MDN .

Что вам нужно, это: (отобразить массив категорий) 

<ul>
  {frontmatter.categories.map((category, i) => (
     <li>
        <Link 
          className={`
            (...tailwind classes...)
          `} 
           key={i} 
           to={category}>
          {category}
        </Link>
      </li>
  ))}
</ul>
...