React中两次调用useTable时返回的同名变量冲突该如何解决？

报错根本原因 #

你在同一个作用域下两次解构出了同名变量getTableProps、getTableBodyProps等，JS 不允许同一作用域下重复声明同名变量，因此触发报错。

解决方法1：解构时重命名变量 #

在解构第二个表格的返回属性时，给变量加别名，避免和第一个表格的变量重名，示例代码：

// 第一个表格解构时重命名
const {
  getTableProps: getTablePropsMain,
  getTableBodyProps: getTableBodyPropsMain,
  headerGroups: headerGroupsMain,
  rows: rowsMain,
  prepareRow: prepareRowMain,
} = tableInstance  

// 第二个表格解构用另一组别名
const {
  getTableProps: getTablePropsDialog,
  getTableBodyProps: getTableBodyPropsDialog,
  headerGroups: headerGroupsDialog,
  rows: rowsDialog,
  prepareRow: prepareRowDialog,
} = tableInstanceDialog 

后续渲染对应表格时，直接使用对应的别名变量即可。

解决方法2：不做解构，直接通过实例调用属性 #

如果不想处理别名问题，可以跳过解构步骤，渲染时直接从表格实例对象上读取对应方法和属性：

// 渲染第一个表格示例
<table {...tableInstance.getTableProps()}>
  <tbody {...tableInstance.getTableBodyProps()}>
    {tableInstance.rows.map(row => {
      tableInstance.prepareRow(row)
      // 剩余行渲染逻辑
    })}
  </tbody>
</table>

// 渲染第二个表格同理，用tableInstanceDialog调用即可

解决方法3：封装通用表格组件（推荐） #

如果后续还有更多表格场景，直接把表格逻辑封装为独立组件，每个组件内部有独立作用域，不会出现变量冲突问题，同时可以复用逻辑：

// 封装通用表格组件
const CustomTable = ({columns, data}) => {
  const columnsM = useMemo(() => columns, [columns])
  const tableData = useMemo(() => data, [data])
  const tableInstance = useTable({columns: columnsM, data: tableData})

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance  

  // 组件内部写死表格渲染逻辑
  return (
    <table {...getTableProps()}>
      {/* 表头、表体完整渲染逻辑 */}
    </table>
  )
}

// 外部使用时直接传参数即可，无变量冲突风险
<CustomTable columns={ColumnsMain} data={rowData} />
<CustomTable columns={ColumnsDialog} data={rowDataDialog} />

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