如何在react中显示来自数据库/cms的数据

Question

我有一个react code，如下所示，用于从CMS/数据库中提取数据。

反应代码：

<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>

Line 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不打印任何内容，尽管我可以在Line Z中显示所有内容。

Answer 1

我认为您有一个警告，因为ListItem组件没有密钥属性。

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

Answer 2

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

Answer 3

如果element对象在第一次渲染中未定义，则向<ListItem>添加一个键并使用?：试试这个代码：

<div>
{ versionList.map((element,i)=>{ 
console.log(element); /* Line Z */ 
return( 
<ListItem key={`list-item-${i}`}>
<div key={`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>