在 next.js 中访问嵌套数组

Question

我是第一次使用 nextjs 和 apollo，我只是想使用 .map 来迭代数据库结果。

这是我的组件代码：

import { gql, useQuery } from "@apollo/client"
import Link from "next/link"
import ErrorMessage from "../layout/ErrorMessage"

export const ALL_COURSES_QUERY = gql`
  query getCourses($limit: Int, $field: String!, $order: Order!) {
    courses(limit: $limit, sort: { field: $field, order: $order }) {
      courseFeed {
        id
        title
        videos {
          title
        }
        creator {
          id
          lastName
        }
        sections {
          title
        }
        ratings {
          id
        }
        deletedAt
      }
      pageInfoCourse {
        nextPageCursor
        hasNextPage
      }
    }
  }
`

export const allCoursesQueryVars = {
  limit: 10,
  field: "title",
  order: "ASC",
}

export default function CourseList() {
  const { loading, error, data } = useQuery(ALL_COURSES_QUERY, {
    variables: allCoursesQueryVars,
  })

  if (error) return <ErrorMessage message="Error loading courses." />

  const { courses } = data
  console.log(courses) // see output below

  return (
    <section>
      <ul>
        {courses.map((course) => (  // this does not work
          <li key={course.id}>
            <Link
              href={{
                pathname: "/courses/[slug]",
                query: { slug: course.slug },
              }}>
              <a>{course.title}</a>
            </Link>
            <p>{course.creator}</p>
          </li>
        ))}
      </ul>
    </section>
  )
}

控制台输出

{
  __typename: 'CourseFeed',
  courseFeed: [
    {
      __typename: 'Course',
      id: '607c1f1201509f26b866cbba',
      title: 'Kurs Eins',
      videos: [Array],
      creator: [Object],
      sections: [Array],
      ratings: [Array],
      deletedAt: null
    }
  ],
  pageInfoCourse: {
    __typename: 'PageInfoCourse',
    nextPageCursor: null,
    hasNextPage: false
  }
}

错误信息

TypeError：courses.map 不是函数

我想遍历courseFeed 数组以使用我页面中的课程对象。我会非常感谢任何形式的帮助！

Answer 1

在您提供的数据中，您尝试映射courses，就像它是一个数组一样，但显然不是。 courses 是一个包含属性courseFeed 的对象，该属性是一个数组。这应该有效：

<ul>
  {courses.courseFeed.map((course) => ( 
  {/* More stuff */}
</ul>

编辑

您已在 cmets 中指出，当您应用上述修复时，您将获得 Error: Objects are not valid as a React child。

该错误消息准确地告诉您问题所在。 course.creator 既不是 React 元素，也不是字符串，也不是未定义的。这是一个object（我们可以从您在问题中发布的日志消息中看到），React 不能将其用作子元素，这意味着该行

<p>{course.creator}</p>

无效。

虽然您问题中的日志消息没有为我们提供有关该对象结构的任何线索，但您的 cmets 中的错误消息却很有帮助。 object with keys {__typename, id, lastName}。我猜您可能想要显示创建者的姓氏，因此您需要将该行修改为

<p>{course.creator.lastName}</p>