ReactJS вложенный цикл для объекта JSON

Question

Я не получил точного ответа, необходимого для устранения проблемы, с которой я столкнулся.У меня есть объект JSON, как показано ниже,

   {  
      "id":1,
      "time":"2018-04-15 22:04:21",
      "alert":{  
         "id":6,
         "name":"Alert Test 416"
      },
      "source":{  
         "type":"Service",
         "id":37379,
         "name":"489-127-2367"
      },
      "value":1310384.000000    },    {  
      "id":1,
      "time":"2018-04-15 22:04:21",
      "alert":{  
         "id":6,
         "name":"Alert Test 416"
      },
      "source":{  
         "type":"Service",
         "id":37826,
         "name":"489-332-4137"
      },
      "value":1352071.000000    },    {  
      "id":2,
      "time":"2018-04-16 22:04:36",
      "alert":{  
         "id":6,
         "name":"Alert Test 416"
      },
      "source":{  
         "type":"Service",
         "id":37364,
         "name":"489-776-9604"
      },
      "value":6021.000000    }

Есть две записи с id = 1 и одна запись с id = 2. Я хотел бы увидеть вывод, как показано ниже,

<tbody> 
<tr id="1" role="row"> 
<td>2018-04-15 22:04:21</td><td>Alert Test 416</td><td>Service</td><td>489-127-2367</td></tr> 
<tr id="1" role="row"> 
<td>2018-04-15 22:04:21</td><td>Alert Test 416</td><td>Service</td><td>489-332-4137</td></tr> 
<tr id="2" role="row"> 
<td>2018-04-16 22:04:36</td><td>Alert Test 416</td><td>Service</td><td>489-776-9604</td></tr> 
</tbody>

Но я получаю вывод, как показано ниже,

<tbody> 
<tr id="1" role="row"> 
<td>2018-04-15 22:04:21</td><td>Alert Test 416</td><td>Service</td><td>489-127-2367</td></tr> 
<tr id="2" role="row"> 
<td>2018-04-16 22:04:36</td><td>Alert Test 416</td><td>Service</td><td>489-776-9604</td></tr> 
</tbody>

Код принимает только самую первую запись для каждого идентификатора верхнего уровня и затем переходит к следующему идентификатору.

Вот код,

<tbody>
              {history.map((item) => {
  return <tr key={item.id} id={item.id} role='row'>
  <td>{item.time}</td>
  <td>{item.alert.name}</td>
  <td>{item.source.type}</td>
  <td>{item.source.name}</td>
</tr>
  })}
</tbody>

История - это объект, содержащий входные данные JSON, показанные выше.Как изменить вышеприведенное, чтобы получить желаемый результат?

Answer 1

_.map(history, (item, index) => {
   return (<tr key={index} id={item.id} role='row'>
            <td>{item.time}</td>
         </tr>)
});

Вы должны всегда использовать Ключ для отображения уникальных атрибутов вместо идентификаторов.Я использовал карту Лодаша, которая является хорошей библиотекой для использования.

Answer 2

Это потому, что вы не можете иметь два элемента с одинаковым ключом или идентификатором, поэтому отображается только один из них.

Вместо того, чтобы иметь несколько элементов с одинаковым идентификатором, просто используйте 1,а затем используйте дополнительные, если вы хотите отобразить больше данных с тем же идентификатором.

Answer 3

Убедитесь, что ваш ключ не дублируется.Один из способов избежать дублирования - объединить что-то с индексом массива.нет изменений для дубликатов.как ..

{history.map((item, index) => {
 return <tr key={index + item.id} id={item.id} role='row'>
     <td>{item.time}</td>
      ....
   </tr>
})}

Answer 4

Поскольку вы указываете идентификатор в качестве ключа, который не является уникальным, отображается только один из элементов с дублированным ключом, если у вас нет возможности использовать уникальный ключ из данных, для которых вы, возможно, предпочтете перейти индекс как

<tbody>
  {history.map((item, index) => {
     return <tr key={index} id={item.id} role='row'>
        <td>{item.time}</td>
        <td>{item.alert.name}</td>
        <td>{item.source.type}</td>
        <td>{item.source.name}</td>
     </tr>
  })}
</tbody>