如何将对象数组传递给表

Question

我在发送数据时感到有些困惑。 下面给出的是 rest 的响应。 我想在表格中发送这个给定的数据。

data = [ 
  {name :'user 1' , teams : [ {id: 1, name : team 1}, {id :2, name :'team 2'}..]}
{name : 'user 2',teams :[ {id: 2, name: team 2},{id: 4, name: team 4} ..] 
]

预期结果

用户名团队

用户 1 团队 1 团队 2 用户 2 团队 2 团队 4

团队必须是可点击的，在传递团队名称的同时，也希望将团队 ID 作为 ID 传递。 在点击表格时，必须发生一些特定事件，所以我显示可以点击。 请帮助实现这一点。 谢谢

Answer 1

如果您对下面的表结构感到困惑，则可以将此类数组绑定到表中。 假设在 rest 返回数组后，您已使用数据设置 state。 以下是反应渲染方法的片段，您将在其中绑定表 html。 希望这可以帮助。

<table className="table table-responsive table-striped center-align" >
    <thead>
        <tr >
            <th scope="col">User</th>
            <th scope="col" >Team</th>
        </tr>

    </thead>
    <tbody>
        {this.state.data.map((dataItem) => {
            let count = 0;
            dataItem['teams '].map((item) => {
                <tr>
                    {++count == 1 ?
                        <td rowSpan={dataItem['teams'].length}>{dataItem.name}</td>
                        : null
                    }
                    <td>
                        {item.name}
                    </td>
                </tr>
            })
        })
        }
    </tbody>
</table>