React Table分页组件Props参数名冲突问题的解决方法咨询

你的问题核心是函数参数命名冲突：组件参数列表里同时声明了props和...props，同一个作用域内不允许存在同名变量，这直接触发了语法错误。另外，React组件本身仅接收单个props参数，你写两个参数的写法本身就不符合规范。

修正后的代码如下：

export const PaginationTable = ({
  fetchData,
  pageCount: controlledPageCount,
  loading,
  isPaginated = true,
  ...restProps // 将剩余属性重命名为restProps，规避命名冲突
}) => {
  // 为useMemo添加正确依赖，确保props更新时memoized值同步更新
  const columns = useMemo(() => restProps.columns, [restProps.columns])
  const data = useMemo(() => restProps.commits, [restProps.commits])

  // 后续可继续使用这些变量及restProps中的其他属性实现分页逻辑
}

关键调整说明： #

• 将组件参数改为单个对象解构，不再单独声明props参数
• 把剩余属性收集变量从...props改为...restProps，彻底解决命名冲突问题
• 修复useMemo的依赖数组：你之前的columns依赖为空数组，会导致columns永远不会随props更新，这是潜在的功能bug，现在已修正为对应props属性作为依赖

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