相同数组上的嵌套地图在每次渲染时都是双倍的

Question

我在状态中有一个数组，并且基于排序字段，我对表进行了不同的排序。我有一份客户名单，有些是第一类，有些是第二类。类型2客户机是类型1的子集。首先，我得到了所有类型1的客户端，然后对于每一个客户端，我找到了它们所有的孩子并列出它们:

<tbody>
{this.state.clients
.filter(x => x.clientTypeId === 2)
.sort((a,b) => sortByField(a, b,this.state.sortOrder === 1 ? 'name' : "registrationNumber", 0) )
.map(client => (
<React.Fragment>
<tr style...

，在表中，我再次重新排序客户端列表，以找到它的子客户端，并排序和显示它们。

{this.state.clients
.filter(x => x.parentClientId === client.id)
.sort((a,b) => sortByField(a,b,this.state.sortOrder === 1 ? 'name' : "registrationNumber", 0) )
.map(subClient => (
<tr className="tableRow" onClick={() => { this.handleSelection(subClient.id); }} key={client.id}>

问题是，每次我更改排序选项时，子客户端表的大小都会增加一倍。好像又在加值了。

整个方法:

{!this.state.isLoading &&
<tbody>
{this.state.clients
.filter(x => x.clientTypeId === 2)
.sort((a,b) => sortByField(a, b,this.state.sortOrder === 1 ? 'name' : "registrationNumber", 0) )
.map(client => (
<React.Fragment>
<tr style={mainStyle} className="tableRow" onClick={() => { this.handleSelection(client.id); }} key={client.id}>
<td><strong>{client.name}</strong></td>
...
</tr>
{this.state.clients
.filter(x => x.parentClientId === client.id)
.sort((a,b) => sortByField(a,b,this.state.sortOrder === 1 ? 'name' : "registrationNumber", 0) )
.map(subClient => (
<tr className="tableRow" onClick={() => { this.handleSelection(subClient.id); }} key={client.id}>

<td>&nbsp;&nbsp;>&nbsp;&nbsp;&nbsp;&nbsp;{subClient.name}</td>
...
</tr>
))}                      
</React.Fragment>
))}
</tbody>
}

我不确定为什么子对象每次都重复。这就好像是将新映射的版本添加到表中。我做错了什么?

Answer 1

找到错误。

在TR标签中，我在两者中都使用了key={client.id}。

第二个循环应该使用subClient.id。

修复此问题，解决此问题。