Nextjs API 函数未呈现所有 API 结果

Question

为什么 next 不渲染 API 中的所有 returns，而只渲染 API 中 3 个中的 1 个？ API 是在 Strapi 中创建的。我是使用 API 的新手，我感觉这是因为 API 请求中的数组“[0]”，但如果没有它，它什么也不会呈现。我尝试用数组内部的 1 替换 0，但它只是将其更改为下一个请求，这根本不是我想要的。我不确定为什么它只渲染 1 任何帮助将不胜感激！

API USAGE

// pages/categories/[category].js
import Link from 'next/link'
import {Text,VStack, Button, Icon, Heading, Alert, AlertIcon, AlertTitle, AlertDescription, Center } from '@chakra-ui/react'
import {FcExternal} from 'react-icons/fc'
import Moment from 'react-moment';


function Category({ categories }) {
  return (
    <VStack minH="500px">
    <Center>
        <Alert status="info">
          <AlertIcon />
          <AlertTitle>Please note:</AlertTitle>
          <AlertDescription>None of these papers are created or owned by the developer, they are created by the Department of Education Australia all rights go to them for these papers.</AlertDescription>
        </Alert>
      </Center>
        <Heading>{categories.name}</Heading>
        {categories.papers.map((cat) => {
          <div>
          <Text>Paper Uploaded at: {cat.created_at} </Text>
          <Text>Paper name: {cat.name}</Text>
          <Link href={`http://localhost:1337${cat.PDF_link}`}>
          <a target="_blank" rel="noopener noreferrer">
            <Button colorScheme="green" rightIcon={<Icon as={FcExternal}/>}>Open PDF</Button>
          </a>
          </Link>
          <Link href={`http://localhost:1337${cat.PDF_Answers_Link}`}>
          <a target="_blank" rel="noopener noreferrer">
            <Button colorScheme="green" rightIcon={<Icon as={FcExternal}/>}>Open Paper Answers</Button>
          </a>
          </Link>
          <Text>File Format: {cat.Media_Upload[0].ext}</Text>
          </div>
        })}
    </VStack>
  )
  }
  
  export async function getStaticPaths() {
    const res = await fetch('http://localhost:1337/Categories')
    const Categories = await res.json()
  
  
    const paths = Categories.map((category) => ({
      params: { category: category.id.toString() },
    }))

    return { paths, fallback: false }
  }
  

  export async function getStaticProps({ params }) {
    // params contains the post `id`.
    // If the route is like /posts/1, then params.id is 1
    const res = await fetch(`http://localhost:1337/Categories/${params.category}`)
    const categories = await res.json()
    console.log(categories)
  
    // Pass post data to the page via props
    return { props: { categories } }
  }

  export default Category

API Return
{
  id: 9,
  name: 'Entertainment Industry',
  Papers_Exist: true,
  web_link: 'categories/9',
  published_at: '2021-10-11T11:28:07.088Z',
  created_at: '2021-10-11T11:14:33.863Z',
  updated_at: '2021-10-11T11:28:08.221Z',
  papers: [
    {
      id: 4,
      name: 'Entertainment Industry Paper 2020',
      PDF_link: '/uploads/2020_hsc_vet_entertainment_18c5c978de.pdf',
      file_uploaded_at: '2021-10-11',
      PDF_Answers_Link: '/uploads/2020_hsc_entertainment_mg_5299ae9c24.pdf',
      published_at: '2021-10-11T11:28:14.016Z',
      created_at: '2021-10-11T11:27:46.534Z',
      updated_at: '2021-10-11T11:28:14.032Z',
      Media_Upload: [Array]
    },
    {
      id: 5,
      name: 'English Studies Paper 2019',
      PDF_link: '/uploads/2019_hsc_vet_entertainment_f2b48d77a0.pdf',
      file_uploaded_at: '2021-10-11',
      PDF_Answers_Link: '/uploads/2019_hsc_vet_entertainment_mg_fe47d01fdf.pdf',
      published_at: '2021-10-11T11:30:18.975Z',
      created_at: '2021-10-11T11:30:13.061Z',
      updated_at: '2021-10-11T11:30:18.989Z',
      Media_Upload: [Array]
    },
    {
      id: 6,
      name: 'English Studies Paper 2018',
      PDF_link: '/uploads/2018_hsc_vet_entertainment_acd7616cae.pdf',
      file_uploaded_at: null,
      PDF_Answers_Link: '/uploads/2018_hsc_vet_entertainment_mg_4a5d3e2660.pdf',
      published_at: '2021-10-11T11:31:42.294Z',
      created_at: '2021-10-11T11:31:40.155Z',
      updated_at: '2021-10-11T11:31:46.107Z',
      Media_Upload: [Array]
    }
  ]
}

getStaticProps $ getStaticPaths

export async function getStaticPaths() {
    const res = await fetch('http://localhost:1337/Categories')
    const Categories = await res.json()
  
  
    const paths = Categories.map((category) => ({
      params: { category: category.id.toString() },
    }))

    return { paths, fallback: false }
  }
  

  export async function getStaticProps({ params }) {
    // params contains the post `id`.
    // If the route is like /posts/1, then params.id is 1
    const res = await fetch(`http://localhost:1337/Categories/${params.category}`)
    const categories = await res.json()
    console.log(categories)
  
    // Pass post data to the page via props
    return { props: { categories } }
  }

Answer 1

因为您只渲染其中一个元素。您可以使用 Array.map() 呈现元素列表。所以，在你的情况下：

<Heading>{categories.name}</Heading>

{categories.papers.map((el, index) => {
  return(
  <div>
    <Text>Paper Uploaded at: {el.created_at}</Text>
    <Text>Paper name: {el.name}</Text>
    <Link href={`http://localhost:1337${el.PDF_link}`}>
    <a target="_blank" rel="noopener noreferrer">
      <Button colorScheme="green" rightIcon={<Icon as={FcExternal}/>}>Open PDF</Button>
    </a>
    </Link>
    <Link href={`http://localhost:1337${el.PDF_Answers_Link}`}>
      <a target="_blank" rel="noopener noreferrer">
        <Button colorScheme="green" rightIcon={<Icon as={FcExternal}/>}>Open Paper Answers</Button>
      </a>
    </Link>
    <Text>File Format: {el.Media_Upload[0].ext}</Text>
  </div>
  )
})}
<Footer />

您可以在 here 中阅读有关 Array.map() 的更多信息。 P.S。您可以以相同的方式渲染 Media_Upload 数组。

Nextjs API 函数未呈现所有 API 结果

Nextjs API function not rendering all API results

javascript

api

strapi

next.js