问题

抱歉，代码部分不提供翻译。以下是翻译好的内容：

Hello，我们一直在使用Material React Table npm包来显示数据，但过滤功能不起作用，所以每次我输入一个字母时都会弹出以下错误：

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", // 默认值
    },
    {
      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"
  }
];

我会感激任何帮助来解决这个问题 谢谢！

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

得分: 1

问题出在React版本上，项目一直在使用React版本17和React-dom版本16。显然，在onChange中，事件和值始终为null，这就是为什么会引发错误的原因。

SyntheticEvent是池化的。这意味着SyntheticEvent对象将被重用，并且在事件回调被调用后，所有属性都将被置为null。这是为了性能原因。因此，你不能以异步方式访问事件。

关于这个事件问题的更多信息在此处

升级到版本后，问题已解决。

"react": "^18.2.0",
"react-dom": "^18.2.0",

<details>
<summary>英文:</summary>
The issue was in React version, project has been using React version 17 and React-dom version 16. Apparently event and value inside onChange was always `null` that is why it was throwing error.
&gt; The SyntheticEvent is pooled. This means that the SyntheticEvent  
&gt; object will be reused and all properties will be nullified after the  
&gt; event callback has been invoked. This is for performance reasons. As  
&gt; such, you cannot access the event in an asynchronous way.
More about this event issue [here][1]
After I upgraded to version 
&quot;react&quot;: &quot;^18.2.0&quot;,   
&quot;react-dom&quot;: &quot;^18.2.0&quot;,
issue was solved.
[1]: https://stackoverflow.com/questions/58059004/input-field-target-is-null-while-accessing-in-onchange-field-in-reactjs
</details>