Javascript React-NextJs不呈现包含假api项的列表

请帮助，我有一个nextJS应用程序，它没有呈现一个包含名为productList的对象数组中的项的列表。我试图以以下代码呈现从第26行开始的productList：

此外，我还验证了productList数组是否存在，是否在第16行的console.log语句中正确组合。以下是控制台中显示的内容：

---

问题在于您在映射中定义的回调，当前您正在使用大括号定义该回调的主体，为了使代码正常工作，您应该添加一个返回语句，或者更好的方法是用括号替换大括号，它应该正常工作，下面您可以找到两种解决方案：

{productList.map(product => (
  <ul>
    <li key={product.id}>{product.name}</li>
  </ul>
))}

{productList.map（产品=>(

{product.name}

))}

或

{productList.map（产品=>{
返回（

{product.name}
）；
})}

这个答案是正确的。这里有一个stackblitz片段，它迭代并呈现一个非常相似的对象数组：我不知道为什么这个问题会被否决。很明显，它是有用的，虽然它可能不会显示出太多的研究成果，但用户经常会对这些迭代挑战感到厌烦。也许人们反对在图像中表示代码。既然可能是这样，试着将实际的代码剪切并粘贴到问题中，而不是图像中。你可以使用另一种策略来再次打开这个问题，那就是提供一个代码片段，以更集中地关注问题。由于控制台显示问题不在获取中，只需创建一个组件，声明productList变量并用对象数组加载它，然后显示试图呈现它的代码。欢迎使用堆栈溢出。它们不能被搜索、复制，甚至不能被屏幕阅读器等自适应技术的用户使用。相反，将代码作为文本直接粘贴到问题中。如果选择它并单击

{}

按钮或Ctrl+K，代码块将缩进四个空格，这将使其呈现为代码。此外，屏幕截图使用编程连字，例如显示

⇒而不是
=>
。对于不使用连字的用户来说，这很难理解。以文本形式发布文本可以避免这个问题。谢谢大家友好的回答，我是新来的，不习惯使用这个平台，我将确保不再重复这个错误。
{productList.map(product => {
  return (<ul>
    <li key={product.id}>{product.name}</li>
  </ul>);
})}