使用数组索引反应渲染数据

Question

我在 React js 中遇到了一个问题，我想渲染 rest API 中的所有数据并显示数字索引。

Rest API：

[
{
"id": "1",
"start_date": "2020-05-08 09:45:00",
"end_date": "2020-05-08 10:00:00",
"full_name": "mirza",
"cust_full_name": "furqan",
},
{
"id": "2",
"start_date": "2020-05-08 02:45:00",
"end_date": "2020-05-08 03:00:00",
"full_name": "mirza",
"cust_full_name": "ahmed",
},
{
"id": "3",
"start_date": "2020-05-08 06:45:00",
"end_date": "2020-05-08 07:00:00",
"full_name": "mirza",
"cust_full_name": "ali",
}
]

我的代码：

render() 
{ 

  let FullNameSlot1 = null   //FullNameSlot
  let SecondFullNameSlot1 = null

  let BaberNameSlot1 = null    //BaberNameSlot
  let SecondBaberNameSlot1 = null    


  if (this.state.appointmentdata && this.state.appointmentdata.length
    this.state.appointmentdata[0].start_date.toString() > this.state.newprevious   
    )
    {
    FullNameSlot1 = (
          <p key={0}>{this.state.appointmentdata[0].cust_full_name}</p>
        )

      BaberNameSlot1 = (
        <p key={0}>{this.state.appointmentdata[0].full_name}</p>
      )
 }

我想用数组 {index} 渲染数据

if (this.state.appointmentdata && this.state.appointmentdata.length
  this.state.appointmentdata[1].start_date.toString() > this.state.newprevious   
  )

  {
    SecondFullNameSlot1 = (
      <p key={1}>{this.state.appointmentdata[1].cust_full_name}</p>
    )
    SecondBaberNameSlot1 = (
      <p key={1}>{this.state.appointmentdata[1].full_name}</p>
    )
}

我想渲染来自 rest API 的所有数据并用数字索引显示。 让我的代码变得simple 。

 <p key={index}>{this.state.appointmentdata[index][0].cust_full_name}</p>
 <p key={index}>{this.state.appointmentdata[index][1].cust_full_name}</p>

演示：

https://codesandbox.io/s/agitated-elion-quqp1

我应该怎么办？ 有人帮我吗？

Answer 1

您可以使用条件渲染，您的最终条件是 map 数据数组到 JSX 或返回 null 的三元组。 array::map 第一个参数是被迭代的当前元素，第二个参数是当前索引。 当像这样返回 JSX 时，虽然您需要返回单个节点。 在这里，我使用了一个反应Fragment并将密钥附加在那里。 我还解构了您想要显示的元素属性。

条件渲染列表和键

{
  (this.state.appointmentdata && 
  this.state.appointmentdata.length &&
  this.state.appointmentdata[1].start_date.toString() > this.state.newprevious)
  ? this.state.appointmentdata.map(({ cust_full_name, full_name }, index) => (
    <Fragment key={index}>
      <p>{cust_full_name}</p>
      <p>{full_name}</p>
    </Fragment>
  ) : null
}

Answer 2

@adnan khan 欢迎来到 Stackoverflow。 要渲染元素数组，您可以使用 Array.map function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

在您的示例中，它可能看起来像这样

if(this.state.appointmentdata && this.state.appointmentdata.length){
this.state.appointmentdata.map((data ,index) => <p key={index}>{data.cust_full_name}</p> )

}

Answer 3

如果要动态渲染元素，则可以选择条件渲染您可以在约会数据上使用map()并在 API 的结果中创建与对象相同数量的元素

样本：

render() {
    return (
        <React.Fragment>
            {
            this.state.appointmentdata.length
            ?
               this.state.appointmentdata.map(ele => {
                    return (
                      <React.Fragment>
                        <p key={`cf_${ele.id}`}>{ele.cust_full_name}</p>
                        <p key={`f_${ele.id}`}>{ele.full_name}</p><hr/>
                      </React.Fragment>
                    )
                })
           : "__"
            }
        </React.Fragment>
    );
}