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

在项目中使用antd-table组件的展开功能
点击第一行加号时,展开的却是第二行,数据却是第一行的数据
出现这种情况一般都是什么原因呢?搞了半天没找出来原因,求解~

这种情况通常是由于使用了相同的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>
      )}
    />
  )}
/>