也许这更具可读性。。。

arr2.map(row => {
  return (
    <tr key={row.id}>
      {
        arr1.map(item => {
          return (
            <td key={`${row.id}_${item}`}>
              {row[item]}
            </td>
          )
        })
      }
    </tr>
  )
});

不要将数据操作逻辑与react组件布局逻辑纠缠在一起。写一份单独的报告 pick(obj, fields) 作用-

const pick = (obj = {}, fields = []) =>
  fields.map(f => obj[f])

const arr1 = ["aadhar", "address", "email", "mobile", "name", "pancard", "voterid"]
const arr2 = [{id: 21,name: "johndoe",email: "hello@gmail.com",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "hello1@gmail.com",address: "test address",voterid: "12111313",mobile: "1211313",aadhar: "112313131313",pancard: "YHUIHU88"}]

console.log(arr2.map(obj => pick(obj, arr1)))

[
  [
    "213123131313",
    "test address",
    "hello@gmail.com",
    "1211313",
    "johndoe",
    "HYG579AA",
    "12131313"
  ],
  [
    "112313131313",
    "test address",
    "hello1@gmail.com",
    "1211313",
    "johndoe3",
    "YHUIHU88",
    "12111313"
  ]
]

现在您可以轻松地编写表格了-

const rows = arr2.map(obj => pick(obj, arr1))
return <table>
  {rows.map(row =>
    <tr>{row.map(cell => <td>...</td>)}</tr>
  )}
</table>

下面是一个完整的示例，您可以在自己的浏览器中运行和验证-

const pick = (obj = {}, fields = []) =>
  fields.map(f => obj[f])

function Table ({ rows, selector }) {
  return <table>
    {rows.map((row, key) =>
      <tr key={key}>
        {selector(row).map((cell, key) =>
          <td key={key}>{cell}</td>
        )}
      </tr>
    )}
  </table>
}

const arr1 = ["aadhar", "address", "email", "mobile", "name", "pancard", "voterid"]
const arr2 = [{id: 21,name: "johndoe",email: "hello@gmail.com",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "hello1@gmail.com",address: "test address",voterid: "12111313",mobile: "1211313",aadhar: "112313131313",pancard: "YHUIHU88"}]

ReactDOM.render(
  <Table rows={arr2} selector={x => pick(x, arr1)}/>,
  document.querySelector("main")
)

table { border: 1px solid black; }
td { border: 1px solid silver; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main></main>

下面是一个包含列标题的替代示例-

const pick = (obj = {}, fields = []) =>
  fields.map(f => obj[f])

function Table ({ rows, cols }) {
  return <table>
    <tr>
      {cols.map((col, key) =>
        <th key={key}>{col}</th>
      )}
    </tr>
    {rows.map((row, key) =>
      <tr key={key}>
        {pick(row, cols).map((cell, key) =>
          <td key={key}>{cell}</td>
        )}
      </tr>
    )}
  </table>
}

const arr1 = ["aadhar", "address", "email", "mobile", "name", "pancard", "voterid"]
const arr2 = [{id: 21,name: "johndoe",email: "hello@gmail.com",address: "test address",voterid: "12131313",mobile: "1211313",aadhar: "213123131313",pancard: "HYG579AA"},{id: 24,name: "johndoe3",email: "hello1@gmail.com",address: "test address",voterid: "12111313",mobile: "1211313",aadhar: "112313131313",pancard: "YHUIHU88"}]

ReactDOM.render(
  <Table rows={arr2} cols={arr1} />,
  document.querySelector("main")
)

table { border: 1px solid black; }
th,td { border: 1px solid silver; }
th { font-weight: bold; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main></main>