无法让 getStaticProps 在 Next 中渲染 JSX.JS

Question

我正在尝试在Next中从本地托管的Strapi API呈现基本数据。

数据将成功登录控制台，但我无法将其映射到JSX中。

API获取函数：

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文件生成静态道具：

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函数显式返回一些内容。

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>
)