Reactjs 反应表筛选-返回值的访问器出现问题

我使用的是React表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>;
    }

列过滤代码

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>
  );
};

更新：如果我将列更改为使用

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>
      );
    },

{
标题：“事件#”，
id:“意外数字”，
//访问者：“意外事件编号”，
单元格：（{row}）=>{
返回(
{row.original.incidentNumber}
);
},

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
    }),
    []
  );

  {
    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>
      );
    },