react-bootstrap-table-next中Column Filter使用及分类过滤点击问题排查

看起来你遇到的问题核心是错误地覆盖了存储过滤函数的变量，导致后续调用时它不再是一个函数，从而抛出错误。咱们一步步拆解：

问题出在哪？ #

你在getFilter回调里把表格提供的过滤函数赋值给了categoryFilter，这一步是对的——这个变量本来应该用来存储那个可以触发过滤的函数。但在handleWidgetClick里，你做了这行代码：

categoryFilter = category;

这直接把categoryFilter从原来的过滤函数替换成了你的分类值（比如字符串或者其他类型），之后再调用categoryFilter(category)时，自然就会报错“不是函数”了，因为此时它已经不是函数了。

修正后的代码 #

首先确保你正确声明categoryFilter变量（用let，因为它会被后续赋值）：

// 先在组件顶部声明变量，用来存储过滤函数
let categoryFilter;

const columns = [
  {
    // ...其他配置
    dataField: "Category",
    formatter: formatCategory,
    text: "Category",
    sort: true,
    filter: textFilter({
      getFilter: (filter) => {
        // 组件挂载后，把过滤函数存到categoryFilter里
        categoryFilter = filter;
      }
    })
    // ...其他配置
  }
];

const handleWidgetClick = (category) => {
  // 不要覆盖categoryFilter，直接调用它并传入分类值
  // 加个判断避免组件未挂载时调用报错
  if (categoryFilter) {
    categoryFilter(category);
  }
};

额外提示 #

为了避免组件还没完成挂载（此时categoryFilter还是undefined）就点击按钮导致报错，加上if (categoryFilter)的判断会更稳妥。这样只有当过滤函数已经被正确赋值后，才会执行过滤操作。

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