React同数组嵌套map渲染时子客户表格行每次翻倍如何解决

问题根源 #

你渲染子客户行时的key属性赋值错误，所有子客户行都复用了父客户的id作为自身唯一标识：

// 错误写法
.map(subClient => (
  <tr className="tableRow" onClick={() => { this.handleSelection(subClient.id); }} key={client.id}>
))

React的key是用来区分列表元素唯一身份的核心属性，当你修改排序触发重渲染时，React会对比新旧列表的key：由于同一个父客户下所有子客户的key都和父客户id一致，React无法识别到旧的子行需要删除，只会把新排序生成的子行追加到原有内容后，就出现了行数翻倍的问题。

修复方案 #

把子客户行的key替换为子客户自身的唯一id即可：

// 修正后写法
.map(subClient => (
  <tr 
    className="tableRow" 
    onClick={() => { this.handleSelection(subClient.id); }} 
    key={subClient.id} // 改为子客户自身的id
  >
    <td>&nbsp;&nbsp;>&nbsp;&nbsp;&nbsp;&nbsp;{subClient.name}</td>
    ...
  </tr>
))

额外优化建议 #

Array.sort()是原地排序方法，会直接修改原数组，你可以在排序前先浅拷贝state中的客户数组，避免意外修改原state：

// 排序前先浅拷贝，不修改原state
[...this.state.clients].filter(x => x.clientTypeId === 2).sort(...)

内容的提问来源于stack exchange，提问作者Craig