javascript - React-NextJs 没有呈现包含来自假 api 的项目的列表

Question

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

此外，我已经验证 productList 数组存在并且在第 16 行的 console.log 语句中正确组合。这是控制台中显示的内容：

标签： javascriptreactjsnext.js

Answer 1

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

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

或者

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