如何将数据从JSON显示到Reactjs中的表中

Question

我具有如下的JSON结构：

const villages = 
{
"lossesOccured":
    [
        {
            "type": "destroyed",
            "affectedOn": "humans",
            "quantity": 120,
            "reliefFund": 100000,
            "location": {
                "district": "thanjavur",
                "villageName": "madukkur",
                "pincode": "614903"
            }
        },
        {
            "type": "physicalDamage",
            "affectedOn": "humans",
            "quantity": 250,
            "reliefFund": 50000,
            "location": {
                "district": "thanjavur",
                "villageName": "madukkur",
                "pincode": "614903"
            }
        },
    ]
}

我需要帮助以表格形式显示JSON数据，如下使用“使用React”。此外，每当在JSON中添加新元素时，都需要自动添加表格行。

Answer 1

<table>
  <thead>
    <tr>
      <th>AffectedOn</th>
      <th>Type</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    {
      villages.lossesOccured.map(loss => (
        <tr>
          <td>{loss.affectedOn}</td>
          <td>{loss.type}</td>
          <td>{loss.quantity}</td>
        </tr>
      )
     }
  </tbody>
</table>