無法讓 getStaticProps 在 Next.JS 中呈現 JSX

Question

我正在嘗試在 Next 中從本地托管的 Strapi API 渲染基本數據。

數據將成功登錄控制台，但我無法將 map 導入 JSX。

API 得到 function：

export async function requestQuery(query) {
  const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/${query}`)
  if (res.status !== 200) return [];
  const data = await res.json();
  return data;
}

Index.js 文件生成 static 道具：

import { requestQuery } from '../lib/staticApi.js';
import Sidebar from '../components/Sidebar.js'

export default function Home({ categories }) {

  return (
    <>
      <Sidebar categories={categories} />
    </>
  )
}

export async function getStaticProps() {

  const categoriesArray = await requestQuery('categories');

  return {
    props: {
      categories: categoriesArray.data
    }
  }
}

從 index.js 成功傳遞道具的組件，但不會渲染到 HTML：

export default function Sidebar({ categories }) {

  console.group(categories) // successfully logs length 4 array;
  return (
    <ul>
      {/* Just mapping id's to try and get it to work - returns empty list */}
      {categories.map((id) => {
        <li>{id}</li>
      })}
    </ul>
  )
}

提前致謝。

Answer 1

你沒有返回任何東西。 檢查下面的修復。 您必須使用括號或從 map function 顯式返回某些內容。

  return (
    <ul>
      {/* Map through array */}
      {categories.map((id) => (
        <li>{id}</li>
      ))}
    </ul>
  )

或者

return (
    <ul>
      {/* Just mapping id's to try and get it to work - returns empty list */}
      {categories.map((id) => {
        // add a return here
        return (<li>{id}</li>);
      })}
    </ul>
  )