React Table Filtering - 返回值的访问器出现问题答案

【问题标题】：React Table Filtering - Trouble with accessors that are returning valuesReact Table Filtering - 返回值的访问器出现问题
【发布时间】：2021-05-25 22:33:48
【问题描述】：

我正在使用 React Table 7.6.x。

我已经为我的 React 表创建了列过滤器。

如果我尝试过滤在访问器中使用 return 语句返回链接组件的列，则过滤器不起作用。奇怪的是 - 如果我在访问器中使用格式化函数，过滤器会按预期工作，例如：

accessor: (d) => {
      return d.incidentStartDate ? formatDateMDY(d.incidentStartDate) : "";
    },

但是这样做：

 accessor: (d) => {
      return <Link to={{ pathname: `/enforcements/watersystems/${d.systemId}` }}>UTAH{d.altId}</Link>;
    }

破坏过滤器。

有没有一种方法可以在创建过滤器时考虑到这一点，或者我应该以不同的方式编写列？

过滤器不起作用 - 使用返回的列属性

 {
    Header: "Incident #",
    id: "incidentNumber",
    accessor: (d) => {
      return (
        <Link
          to={{
            pathname: `/enforcements/watersystem/${d.systemId}/${d.incidentNumber}`,
            state: { incident: d }
          }}
        >
          {d.incidentNumber}
        </Link>
      );
    },
    width: 90
  },

如果我更改为：

 {
    Header: "Incident #",
    id: "incidentNumber",
    accessor: "incidentNumber",
    width: 90
  },

列过滤器代码

const DefaultColumnFilter = ({ column: { filterValue, preFilteredRows, setFilter } }) => {
  return (
    <InputGroup size="sm" className="mb-3 mt-3">
      <FormControl
        aria-label="Small"
        aria-describedby="inputGroup-sizing-sm"
        value={filterValue || ""}
        onChange={(e) => {
          setFilter(e.target.value || undefined);
        }}
        placeholder={"Search ..."}
      />
    </InputGroup>
  );
};

默认列声明

 const defaultColumn = React.useMemo(
    () => ({
      Filter: DefaultColumnFilter,
      defaultFilters: true,
      minWidth: 30,
      width: 150,
      maxWidth: 500
    }),
    []
  );

更新：如果我将列更改为使用 Cell 而不是 accessor，过滤框就会消失。

  {
    Header: "Incident #",
    id: "incidentNumber",
    //accessor: "incidentNumber",
    Cell: ({ row }) => {
      return (
        <Link
          to={{
            pathname: `/enforcements/watersystem/${row.original.systemId}/${row.original.incidentNumber}`,
            state: { incident: row.original }
          }}
        >
          {row.original.incidentNumber}
        </Link>
      );
    },

【问题讨论】：

标签： reactjs react-table-v7

【解决方案1】：

通过对 ROW 元素使用 Cell 属性和对过滤列值使用accessor 来解决此问题，如下所示。

{
Header: "Incident #",
accessor: "incidentNumber",
Cell: ({ row }) => {
  return (
    <Link
      to={{
        pathname: `/enforcements/watersystem/${row.original.systemId}/${row.original.incidentNumber}`,
        state: { incident: row.original }
      }}
    >
      {row.original.incidentNumber}
    </Link>
  );
},

【讨论】：