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 组件没有 key 属性。

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

Answer 2

在第 Z 行，您正在执行控制台日志，这就是您可以看到数据的原因。正在返回 div 和该 div 中的其余代码。取决于它要去哪里以及它发生了什么，这可能是您的问题。您能否包含返回发送 div 的代码？

Answer 3

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

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

如何在反应中显示来自数据库/cms的数据？

3 个答案: