页面呈现时反应表列过滤器问题答案

【问题标题】：React Table column filter issue when the page render页面呈现时反应表列过滤器问题
【发布时间】：2020-12-10 12:22:50
【问题描述】：

我正在为我的项目使用反应表。我正在尝试为我的项目添加列过滤器。请检查我的表头代码

        <thead>
      {headerGroups.map((headerGroup) => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((column) => (
            <th {...column.getHeaderProps(column.getSortByToggleProps())}>
              {column.render("Header")}
              <span>
                {column.isSorted
                  ? column.isSortedDesc
                    ? " ????"
                    : " ????"
                  : ""}
              </span>
              <div>{column.canFilter ? column.render("Filter") : null}</div>
            </th>
          ))}
          <th>Action</th>
        </tr>
      ))}
    </thead>

这是我的 column.js 文件

    import React from "react";

export const ColumnFilter = ({ column }) => {
  const { filterValue, setFilter } = column;
  return (
    <span>
      <input
        value={filterValue || ""}
        onChange={(e) => setFilter(e.target.value)}
      />
    </span>
  );
};

在我将过滤器添加到我的表格列之后。这是我添加的一个标题。

  {
Header: "Type",
accessor: "INVOICE_LINE_ID",
Filter: ColumnFilter,

我认为我正确添加了所有内容。但发生错误。根据错误，错误来自 "{column.canFilter ? column.render("Filter") : null}" 这一行。

但我找不到错误。Error preview 如果我评论那条线，项目运行良好，排序、分页和一切正常。我该如何解决这个问题

【问题讨论】：

如果没有完整的代码将很难提供帮助，您不会在这里向我们展示实际的错误功能（.render 您的专栏的方法）

标签： reactjs

【解决方案1】：

我遇到了同样的问题。
在docs example 中已指定

您需要将默认列选项传递给 useTable 挂钩

因此在您的表头组件中，例如 FilteringTable.js

定义使用 useMemo 钩子的 defaultColumn 组件

FilteringTable.js

import { ColumnFilter } from './ColumnFilter'

const FilteringTable = () => {

  const columns = useMemo(()=> GROUPED_COLUMNS, [])
  const data = useMemo(() => MOCK_DATA, [])
  
  const defaultColumn = useMemo(
    () => ({
      // Let's set up our default Filter UI
      Filter: ColumnFilter,
    }),
    []
  )  
}

将 defaultColumn 选项传递给 useTable 挂钩

FilteringTable.js

import { ColumnFilter } from './ColumnFilter'

const FilteringTable = () => {

  const columns = useMemo(()=> GROUPED_COLUMNS, [])
  const data = useMemo(() => MOCK_DATA, [])
  
  const defaultColumn = useMemo(
    () => ({
      // Let's set up our default Filter UI
      Filter: ColumnFilter,
    }),
    []
  )  
  
    const { 
    getTableProps, 
    getTableBodyProps, 
    headerGroups,
    footerGroups,
    rows,
    prepareRow,
    state,
    setGlobalFilter,
  } = useTable({
    columns: columns,
    data: data,
    defaultColumn // Be sure to pass the defaultColumn option
  },
  useFilters,
  useGlobalFilter)
}

【讨论】：