在现代Web开发中，数据的管理和展示是常见且至关重要的任务。特别是在使用React框架的项目中，Tanstack的React Table（以前称为React Table）提供了强大的功能来处理表格数据。今天，我们将探讨如何在NextJS 13中使用Tanstack Data Table进行行数据的编辑和删除操作，并解决一个常见的问题——为什么编辑模态框总是显示最后一行的数据。
背景介绍
在项目中，我们使用了NextJS 13来构建一个管理费用记录的应用。通过Tanstack Data Table，我们能够高效地展示费用数据，并为每一行提供了"修改"和"删除"的操作按钮。
问题描述
用户点击"修改"按钮时，模态框应该显示所选行的数据，但实际上总是显示表格中最后一行的数据。这个问题在使用"删除"按钮时并不存在，因为删除操作能够正确地获取到当前行的数据。
分析问题
首先，我们来看一下ExpenseActions.tsx组件的代码：
const ExpenseActions = ({ expenseId, value, description, dateOfExpense }: ExpenseActionsProps) => { ... return ( <> <EditExpenseModal expenseId={expen
