使用antd-table组件的展开功能，展开的行不匹配的问题

Question

在项目中使用antd-table组件的展开功能

点击第一行加号时，展开的却是第二行，数据却是第一行的数据

出现这种情况一般都是什么原因呢？搞了半天没找出来原因，求解～

Answer 1

这种情况通常是由于使用了相同的key值导致的。在使用antd-table组件时，需要给每一行设置一个唯一的key值，这样才能保证点击一行时，展开的正是点击的这一行。

如果你没有设置key值，antd-table会自动使用索引值作为key值。但是如果表格数据是通过ajax加载，或者是动态渲染，索引值可能会发生变化，导致展开的行不匹配。

因此，建议你在渲染表格时使用唯一的数据字段，比如说id，或者是其他不会变化的字段，作为key值。

例如：

<Table
  dataSource={dataSource}
  render={(text, record) => (
    <Expand
      key={record.id}
      render={() => (
        <div>{record.description}</div>
      )}
    />
  )}
/>