嵌套 map 在同一个数组上双打在每个渲染

Question

I have an array in the state, and based on a sort field, I order the table differently. I have a list of clients, and some are type 1, and some are type 2. The type 2 clients are a subset of type 1. So First I get all the type 1 clients, and then for each of those, I find all their children and list them:

      <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...

and within the table, I re-sort the client list again, to find its children clients, and order and display them.

 {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}>

The problem is, each time I change the sort option, the table of sub-clients doubles in size. It seems to add the values again.

The whole method:

{!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>
            }

I'm not sure why the child objects duplicate each time. It's as if it's adding the newly mapped version to the table. What am I doing wrong?

Answer 1

Found the error.

In the TR tags, I used key={client.id} in both.

The 2nd loop should be using subClient.id .

Fixing this, resolved the issue.