Material React Table筛选失效：Cannot read properties of null (reading 'value')

在使用Material React Table展示数据时，筛选功能无法正常工作，输入字符时会抛出以下错误：

Uncaught TypeError: Cannot read properties of null (reading 'value')
at MRT_FilterTextField.tsx:119:1
at later (debounce.js:7:1)

相关代码 #

const columns = useMemo(
  () => [
    {
      header: `${t("login_title_email")}`,
      accessorFn: (row) => row.log_email_address,
      enableClickToCopy: true,
      filterVariant: "text", // default
    },
    {
      header: `${t("login_title_ip")}`,
      accessorKey: "login_attempt_ip",
      enableClickToCopy: true,
    },
    {
      header: `${t("login_title_date")}`,
      accessorFn: (row) => new Date(row.log_date),
      filterFn: "greaterThanOrEqualTo",
      sortingFn: "datetime",
      id: "log_date",
      Cell: ({ cell }) => cell.getValue()?.toLocaleDateString(),
      Filter: ({ column }) => (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DatePicker
            onChange={(newValue) => {
              column.setFilterValue(newValue);
            }}
            slotProps={{
              textField: {
                sx: { minWidth: "120px" },
                variant: "standard",
              },
            }}
            value={column.getFilterValue()}
          />
        </LocalizationProvider>
      ),
    },
    {
      header: `${t("login_type")}`,
      accessorKey: "log_type",
    },
  ],
  []
);

<MaterialTable
  data={logs}
  columns={columns}
  enableColumnOrdering
  enableGrouping
  enablePinning
  enableRowNumbers
  initialState={{
    density: "compact",
    showGlobalFilter: true,
    showColumnFilters: true,
  }}
/>

数据结构示例 #

const data = [
  {
    log_date: "2023-06-02T04:01:43.665Z",
    log_email_address: "test@gmail.com",
    log_type: "login_email",
    login_attempt_ip: "10.10.16.10",
    user_id: "12334444"
  }
];

解决方案 #

1. 修复useMemo依赖项缺失问题
   columns数组的useMemo依赖为空数组，但内部使用了t()国际化函数，这会导致columns无法响应依赖更新，进而引发组件内部状态异常。将t加入useMemo的依赖数组：

   const columns = useMemo(
     () => [/* ...列配置... */],
     [t] // 添加t到依赖
   );
   

2. 处理日期筛选组件的null值
   当筛选值为null时，DatePicker的value属性直接传入null可能导致组件内部报错，给value设置默认值或处理为undefined：

   <DatePicker
     onChange={(newValue) => {
       column.setFilterValue(newValue ?? null); // 确保值为Date或null
     }}
     slotProps={{
       textField: {
         sx: { minWidth: "120px" },
         variant: "standard",
       },
     }}
     value={column.getFilterValue() ?? undefined} // 替换null为undefined
   />
   

3. 修复日期accessorFn的异常情况
   如果row.log_date为空或无效值，new Date(row.log_date)会返回Invalid Date，影响筛选逻辑，添加空值判断：

   accessorFn: (row) => row.log_date ? new Date(row.log_date) : null,
   

4. 升级Material React Table版本
   该错误可能是特定版本的组件bug，尝试升级到最新稳定版：

   npm update material-react-table
   

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