Next.js配合Apollo调用接口时map遍历嵌套数组报错如何解决

你从Apollo查询拿到的courses是包含分页信息和课程列表的对象，不是数组，只有它内部的courseFeed字段才是你要遍历的课程数组，所以直接调用courses.map会触发类型错误。

你需要调整组件里的逻辑，补充loading状态处理，调整遍历目标，同时补全查询字段、修正creator的渲染逻辑，修改后的代码如下：

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

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

  const { courses } = data
  // 遍历courseFeed数组而不是courses对象
  const courseList = courses.courseFeed

  return (
    <section>
      <ul>
        {courseList.map((course) => (
          <li key={course.id}>
            <Link
              href={{
                pathname: "/courses/[slug]",
                query: { slug: course.slug },
              }}>
              <a>{course.title}</a>
            </Link>
            {/* creator是对象，需要取内部属性渲染 */}
            <p>{course.creator.lastName}</p>
          </li>
        ))}
      </ul>
    </section>
  )
}

另外记得在你的GraphQL查询的courseFeed字段中补加slug字段，否则你拿不到course.slug的值：

courseFeed {
  id
  slug # 新增这个字段
  title
  videos {
    title
  }
  creator {
    id
    lastName
  }
  sections {
    title
  }
  ratings {
    id
  }
  deletedAt
}

• 必须处理loading状态，避免数据还没返回时访问data属性触发报错
• GraphQL查询是按需返回字段，你需要用到的字段必须显式在查询语句中声明
• 不要直接把对象渲染到JSX中，需要取对象的基础类型属性（字符串、数字等）进行渲染

内容的提问来源于stack exchange，提问作者kampfkuchen