Reactjs 使用嵌套记录json数据反应呈现错误

当从JSON文件呈现数据时，我需要一些帮助。JSON文件中有多条记录，为此我使用map函数。我正在成功地从标题属性获取数据，但在每个记录中都有数组/嵌套项，当我试图呈现这些数据时，我收到一个错误

TypeError:无法读取未定义的属性“map”。我曾试图单独呈现每条记录中的嵌套数组，但仍然不起作用。下面是我的代码

   import React, { Component } from "react";
import "../src/css/custom.css";
import data from "../src/data/Items.json";

class PenItems extends Component {

  render() {

    if (!data) {
      return <h1>Loading....</h1>
    }

    return (

      <div className="container">
        <table className="table table-responsive">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Status</th>
              <th scope="col">Requester</th>
              <th scope="col">Reason / State</th>
            </tr>
          </thead>
          <tbody>
            {data.map((record, index) => (
              <tr key={record.index}>
                
                <td>{record.UniqueName}</td>
                <td>{record.StatusString}</td>
                <td>{record.Requester.UniqueName}</td>

                 // the below code is generating an error which is another array inside each record.
                {data.ApprovalRequests.map((record, index) => (
                  <td key={record.index}>{record.Reason} - {record.State}</td>
                ))}

              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default PenItems;

谢谢大家。
您应该循环
记录
以获得
批准请求


{data.map（（记录，索引）=>(
{record.UniqueName}
{record.StatusString}
{record.Requester.UniqueName}
//下面的代码正在生成一个错误，该错误是每个记录中的另一个数组。
{record.ApprovalRequests.map（（approvalRequest，索引）=>(
{approvalRequest.Reason}-{approvalRequest.State}
))}
))}
我没有话要感谢你，但还是非常感谢：-）。它现在工作得很好。嗨，阿肯沙。我还有一个问题。如果第二个嵌套循环下还有第三个数组呢？那么您可以通过循环
approvalRequest
来获取第二个嵌套循环的数据。谢谢。我已经更新了JSON。请看一下JSON第一条记录好吗？您必须执行
approvalRequest.approver.map（（approver，index）=>（））
   {
    "Records": [
     //Record 1
        
{
    "StatusString": "Submitted",
    "UniqueName": "IT2566",
    "ApprovalRequests": [  // second loop
        {
            "State": 1,
            "Reason": "Needed For office",
            "Approver": [ // third loop
                {
                    "UniqueName": "xyz"
                },
                {
                    "UniqueName": "xyz"
                },
                {
                    "UniqueName": "xyz"
                }
            ]
        },
        {
            "State": 1,
            "Reason": "Official Requirement",
            "Approver": {
                "UniqueName": "Jhon"
            }
        }
    ]
},
           // Record 2
            {
                "Requester": {
                    "UniqueName": "985521"
                },
                "StatusString": "Submitted",
                "UniqueName": "IT2566",
                "ApprovalRequests": [
                    {
                        "State": 1,
                        "Reason": "Needed For office",
                        "Approver": {
                            "UniqueName": "Daisy Wang"
                        }
                    },
                    {
                        "State": 1,
                        "Reason": "Official Requirement",
                        "Approver": {
                            "UniqueName": "Jhon"
                        }
                    }
                ]
            }
        ]
    }