react-table第2页及以后子组件传入错误props问题求助

这种分页后组件状态串位的坑我之前踩过好多次，太懂你的烦恼了！根据你描述的现象——第一页正常，后续页面同位置行的Modal拿到的是第一页对应行的ID，大概率是这几个原因导致的，咱们一个个解决：

1. 行元素的Key用了索引而非唯一ID #

这是最常见的罪魁祸首！React会通过key来识别组件是否需要重新渲染或复用实例。如果你的表格行用数组索引（比如key={index}）当key，分页后第二页第一行的索引还是0，React会直接复用第一页第一行的组件实例，导致Modal的listId还是旧值。

修复方法：把行的key换成每行数据的唯一标识（比如业务ID）：

// 错误写法：用索引当key
{rows.map((row, index) => (
  <tr key={index}>...</tr>
))}

// 正确写法：用行数据的唯一ID当key
{rows.map(row => (
  <tr key={row.original.id}> {/* row.original是react-table提供的原始数据对象 */}
    {/* 其他列渲染 */}
    <td>
      <button onClick={() => openModal(row.original.id)}>打开Modal</button>
    </td>
  </tr>
))}

2. Modal的显隐状态用索引而非唯一ID控制 #

如果你是用“选中行的索引”来控制Modal的显示，分页后新页面同位置行的索引和第一页一致，就会导致Modal关联到第一页的行数据。

修复方法：改用“选中行的唯一ID”来管理Modal状态：

// 错误写法：用索引管理状态
const [selectedIndex, setSelectedIndex] = useState(null);

// 正确写法：用唯一ID管理状态
const [selectedRowId, setSelectedRowId] = useState(null);

// 打开Modal的函数
const openModal = (rowId) => {
  setSelectedRowId(rowId);
};

// Modal组件的渲染逻辑
<ReactModal
  isOpen={selectedRowId !== null}
  listId={selectedRowId}
  onRequestClose={() => setSelectedRowId(null)}
>
  {/* 基于selectedRowId获取对应数据渲染内容 */}
  {data.find(item => item.id === selectedRowId)?.content}
</ReactModal>

3. 确认React Table的行数据传递正确 #

检查你的自定义列渲染函数，确保拿到的是当前分页的行数据，而非缓存的旧数据。比如在useTable的列配置里，要通过row.original获取原始数据，而不是依赖外部可能未更新的变量：

const columns = useMemo(() => [
  // 其他列
  {
    Header: '操作',
    Cell: ({ row }) => (
      <button onClick={() => openModal(row.original.id)}>
        打开Modal
      </button>
    )
  }
], []);

总结 #

核心思路就是让React能准确区分每一行组件（用唯一ID当key），同时用唯一ID而非索引来关联Modal和行数据，避免分页后索引重复导致的状态串位。按这个思路调整后，应该就能解决后续页面Modal ID错误的问题了！

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