无法使用下一个Js渲染数据

如何解决无法使用下一个Js渲染数据

我正在尝试按照Next docs中提供的步骤使用来自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.log可以正常记录，但是再次没有呈现给浏览器。

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

解决方法

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