Javascript 将值从子阵列打印到表格

我有一个这样的数组：

var example = [
    {
        name: 'Alex',
        id: 1,
        jobs: [
            'potato picker',
            'spirit catcher',
            'pirate'
        ],
    },
    {
        name: 'Jonathan',
        id: 2,
        jobs: [
            'strawberry guard',
            'kings guard',
            'model'
        ],
    }
];

我在React有一张桌子，看起来像这样：

<Table striped bordered condensed hover responsive>
    <thead>
    <tr>
        <th style={{textAlign: 'center'}}>Name</th>
        <th style={{textAlign: 'center'}}>ID</th>
        <th style={{textAlign: 'center'}}>Jobs<th>
    </tr>
    </thead>
    <tbody>
    {
        exampleArr.map((user, i) => (
            <tr key={user.id}>
                <React.Fragment>
                    <td>{user.name}</td>
                    <td>{user.id}</td>
                    {
                        user.jobs.map(job => (
                            <tr><td>{job}</td></tr>
                        {/*Obviously this throws an error*/}
                        ))
                    }
                </React.Fragment>
            </tr>
        ))
    }
    </tbody>
</Table>

名称
身份证件
乔布斯
{
示例arr.map（（用户，i）=>(
{user.name}
{user.id}
{
user.jobs.map（作业=>(
{job}
{/*显然这会抛出一个错误*/}
))
}
))
}

这或多或少就是我想要的最终结果

我怎样才能达到这样的效果呢

显然，将

作为

的子对象会抛出一个错误，但我认为我需要这样的东西

---

理论上，我可以将名称和用户id添加到每个作业元素中，但有没有更简单的方法呢？

您真的需要新行，还是可以将其包含在一个单元格中

如果可以将其放在单个单元格中，请将每个作业包装在一个div中，这样它将显示为一个块

user.jobs.map(job => (
    <div>{job}</div>
))

user.jobs.map（作业=>(
{job}
))

您真的需要新行，还是可以将其包含在该单元格中

如果可以将其放在单个单元格中，请将每个作业包装在一个div中，这样它将显示为一个块

user.jobs.map(job => (
    <div>{job}</div>
))

user.jobs.map（作业=>(
{job}
))

您可以将所需的

放在子表中：

<tbody>
 {
     exampleArr.map((user, i) => (
         <tr key={user.id}>
             <React.Fragment>
                 <td>{user.name}</td>
                 <td>{user.id}</td>
                 <table>
                     {user.jobs.map(job => (
                         <tr>
                             <td>{job}</td>
                         </tr>
                     ))}
                 </table>
             </React.Fragment>
         </tr>
     ))
 }
 </tbody>

{
示例arr.map（（用户，i）=>(
{user.name}
{user.id}
{user.jobs.map（作业=>(
{job}
))}
))
}

您可以将所需的

放在子表中：

<tbody>
 {
     exampleArr.map((user, i) => (
         <tr key={user.id}>
             <React.Fragment>
                 <td>{user.name}</td>
                 <td>{user.id}</td>
                 <table>
                     {user.jobs.map(job => (
                         <tr>
                             <td>{job}</td>
                         </tr>
                     ))}
                 </table>
             </React.Fragment>
         </tr>
     ))
 }
 </tbody>

{
示例arr.map（（用户，i）=>(
{user.name}
{user.id}
{user.jobs.map（作业=>(
{job}
))}
))
}

为td的孩子制作一张表格，然后放入您的sthat@imjared这就是解决办法。您想添加一个答案吗？为td的孩子制作一张表格，然后将您的答案放入表格中that@imjared这就是解决办法。您想添加一个答案吗？