如何在React中显示来自数据库/CMS的数据？

Question

我有一个react code，如下所示，它可以从CMS/Database中提取数据。 

反应代码：

<div>
   { versionList.map((element,i)=>{ 
   console.log(element); /* Line Z */ 
   return( 
   <ListItem>
      <div key={i}>
         <p>title: {element.title}</p>
         <p>description: {element.description}</p>
         <p>air date: {convertToTimeZone({date: element.air_date_dt},selectedTimezone)}</p>
      </div>
   </ListItem>
   ) }) }
</div>

Z行打印以下内容：

air_date_dt: "2021-03-20T11:00:00.000Z"
air_duration_i: "1"
description: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
description_en_t: "Aliquam tincidunt mauris eu risus."
description_fr_t: "Vestibulum auctor dapibus neque."
image: "/versions/en.png"
image_en_s: "/versions/en.png"
image_fr_s: "versions/fr.png"
title: "Hello World"
title_en_t: "Hello World"
title_fr_t: "Bonjour le monde"

问题说明：在上面的代码中，listitem中的div没有打印任何内容，尽管我能够在行z中显示所有内容。

Answer 1

在Z行，您正在执行一个控制台日志，这就是您可以看到数据的原因。将返回div和该div中的其余代码。这取决于它的去向，以及它所发生的事情可能是你的问题。你能把返回的代码包括在发送div的地方吗？

Answer 2

我认为您有一个警告，因为listitem组件没有key属性。

尝试将键从div移动到listitem组件。另一个提示应该是检查CSS。请确保您没有隐藏块。