Реагировать на рендеринг данных с индексом массива

Question

У меня проблема в React js, я хочу отобразить все данные из rest API и показать их с индексом numeri c.

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

Я хочу отобразить все данные из API отдыха и показать с индексом numeri c . Сделайте мой код 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

@ аднан хан Добро пожаловать в Stackoverflow! для рендеринга массива элементов вы можете использовать функцию Array.map 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 2

Если вы хотите отображать элементы динамически, тогда возможна условная визуализация. Вы можете использовать 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>
    );
}

Answer 3

Вы можете использовать условный рендеринг, и ваше конечное условие является троичным: либо отображение массива данных в 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
}