如何在反应中显示来自数据库/cms的数据? [英] How to show data from database/cms in react?

问题描述

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

反应代码:

{ versionList.map((element,i)=>{控制台日志(元素)；/* 第 Z 行 */返回(<列表项><div key={i}><p>title: {element.title}</p><p>描述:{element.description}</p><p>播出日期:{convertToTimeZone({date: element.air_date_dt},selectedTimezone)}</p>
</ListItem>) }) }

Line Z 打印以下内容:

air_date_dt:2021-03-20T11:00:00.000Z"air_duration_i:1"；描述:Lorem ipsum dolor sat amet，consectetuer adipiscing elit."description_en_t:Aliquam tincidunt mauris eu risus."description_fr_t:Vestibulum auctor dapibus neque".图像:/versions/en.png"；image_en_s: "/versions/en.png";image_fr_s: "versions/fr.png";标题:《你好世界》title_en_t:你好世界"；title_fr_t:Bonjour le monde"

问题陈述:在我上面的代码中，ListItem 中的 div 没有打印任何内容，尽管我能够在 Line Z.

解决方案

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

{ versionList.map((element,i)=>{控制台日志(元素)；/* 第 Z 行 */返回(<ListItem key={`list-item-${i}`}><div key={`div-key-${i}`}><p>title: {element?.title}</p><p>描述:{元素?.描述}</p><p>播出日期:{convertToTimeZone({date: element?.air_date_dt},selectedTimezone)}</p>
</ListItem>) }) }

I have a react code as shown below in which to pull data from CMS/Database. 

React code:

<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 prints the following:

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"

Problem Statement: In my code above, the div inside the ListItem doesn't print anything although I am able to show everything at Line Z.

解决方案

Add a key to the <ListItem> and use the ? in case the element object be undefined in the first render: Try this code:

<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的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！