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>

代码只获取每个顶级ID的第一个条目，然后移动到下一个id。

这是代码，

<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

由于您将id指定为非唯一的键，因此只有一个具有重复键的元素才会呈现，如果您没有任何选项可以使用唯一键来形成您可能更喜欢的数据像

这样的索引

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

Answer 2

这是因为你不能有两个具有相同键或id的元素，因此只显示其中一个元素。

如果你想显示关于同一个id的更多数据，而不是让具有相同id的多个，只需使用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

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

您应该始终使用Key来显示唯一属性而不是ID。我在这里使用了Lodash地图，这是一个很好的库。

ReactJS在JSON对象

4 个答案: