React/NextJS 获取后无法获取地图功能显示

Question

我是 React/NextJS 的新手，尝试进行简单的获取，每当我尝试使用映射函数时，它似乎都没有进入其中。我不确定我做错了什么，我正在遵循一些教程/文档NextJS Doc，但我不知道我错过了什么。有人可以给我一些见解吗？

这一切都在 page.tsx 文件中。

src/app/incidents/page.tsx

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  if(!res.ok) {
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

export default async function Incidents () {

  const reports = await getData()

  return(
    <main>
      {reports?.map((item: any) => {
        <p className='text-orange-500'>Hello</p>
      })}
    </main>
  )
}

这是我的 package.json 中的依赖项，以防有帮助：

  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },```

没有预期结果的黑屏 就像我提到的和上面的代码一样，我尝试按照教程和文档进行操作，但我似乎无法理解。我的屏幕不显示任何内容（图像是黑色的，因为我使用黑暗模式哈哈）。

Answer 1

即可获取数据。 Map函数没有返回值。由于在map函数中使用了{}，因此打开了一个代码块，由于该代码块中没有返回值，因此不会发生渲染。

{reports.map((item) => (
    <p>{item.name}</p>
))}

() 您可以使用普通括号在屏幕上显示数据。