Nextjs -异步函数中的渲染组件

92vpleto  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(141)

我是Nextjs的新手,我正在尝试Map数组中的一组项目,并将它们传递到卡片组件中。但是Card组件不会呈现在页面上。如果将放在div标签之间,它将呈现。

const Results = () => {
getProductInformation().then( (a) => 
{
  let b = Object.keys(a).map((item) => {
    //console.log(a[item].ProductName);
      <Card/>
 }
})

return (
    <div class="resultView">
      {
     
        console.log(aitem.ProductName)
      }
    </div>
  )
}

export default Results;

我还想把[item]作为prop传递给card组件,然后在card组件中使用console.log,但是当我尝试从card组件中使用console.log时,它返回:undefined.

dsf9zpds

dsf9zpds1#

  • getProductInformation可能不会返回任何东西。我建议你在这里console.log(a)
// make sure your promise resolving "a" or "a" is not empty array
getProductInformation().then( (a) => console.log(a))
  • 您必须返回<Card/>组件
getProductInformation().then( (a) => 
{
  // you dont need `let b=`
   Object.keys(a).map((item) => {
    //console.log(a[item].ProductName);
    return <Card/>
}
})
// after this scope of `a` is gone. you cannot access it after closing the parantheses

此函数调用完成后,您将无法再访问a变量。它的作用范围在

  • 您在div中渲染,因为您实际上返回了一些东西

相关问题