未使用 Next Js 呈现数据

Question

我正在尝试按照 Next 文档中提供的步骤使用 API 中的数据。我的数据没有渲染，这是我第一次尝试 React，所以我不确定我错过了什么。有人介意指出我的错误吗？

export default function Home({ items }) {
  console.log(items) // Items listed in the console fine
  return (
    <ul>
      {items.map((item, index) => {
        <li key={index}>{item.description}</li>
      })}
    </ul>
  )
}

export async function getStaticProps() {
  // Get Data Here
  return { props: {
      items
    }}
};

从我上面的注释可以看出，控制台按预期列出了项目。我还可以在 chrome 的 React Dev Tools 中看到 items 数组。

---

以下 console.logs 符合预期，但浏览器仍然没有呈现任何内容。

export default function Home({items}) {
  return (
    <ul>
      {items.map((item, index) => {
        console.log(item.description);
        <li key={index}>{item.description}</li>
      })}
    </ul>
  )
}

Answer 1

{items.map((item, index) => {
  console.log(item.description);
  <li key={index}>{item.description}</li>
})}

应该是：

{items.map((item, index) => {
  console.log(item.description);
  return <li key={index}>{item.description}</li>
})}