在React数组中推送JSON对象

Question

我有一个JSON对象数组，我想将它作为来自React组件的道具传递，每次属性的数量可以不同，所以我将元素推入数组中，但是所有对象都放在一行中父App.js

import React from 'react';
import './App.css';
import Table from './Table';

function App() {
 const arr=['nom','prénom','age',];
 const arr2=[
 {nom:'waexemp1',prenom:'leo',age:30,mail:'xxx@kkk.com'},
 {nom:'res',prenom:'ken',age:20,mail:'xxx@kkk.com'}];
 const arr3=[arr2.map((l)=>l.nom),arr2.map((l)=>l.prenom),arr2.map((l)=>l.age)];
console.log('-_-_-_-_-_-');
console.log(arr3);
  return (
    <div className="App">
     <Table arr={arr} arr2={arr3}/>
    </div>
  );
}

导出默认应用； 在儿童中

import React, { Component } from 'react'

export default class Table extends Component {

  render() {
    const {arr}=this.props;
    const {arr2}=this.props;


    return (
      <div>
        <table border="2">
           {arr.map((e)=><th>{e}</th>)}
      <tbody>
        {arr2.map((k)=><td>{k}</td>)}
      </tbody>
      </table>
      </div>
    );
  }
}