Material React Table简单过滤不起作用 无法读取null的属性（读取’value’）

huangapple
go评论115阅读模式
英文:

Material React Table simple filtering not working Cannot read properties of null (reading 'value')

问题

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

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

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

这是代码部分：

  1. const columns = useMemo(
  2.   () => [
  3.     {
  4.       header: `${t("login_title_email")}`,
  5.       accessorFn: (row) => row.log_email_address,
  6.       enableClickToCopy: true,
  7.       filterVariant: "text", // 默认值
  8.     },
  9.     {
  10.       header: `${t("login_title_ip")}`,
  11.       accessorKey: "login_attempt_ip",
  12.       enableClickToCopy: true,
  13.     },
  14.     {
  15.       header: `${t("login_title_date")}`,
  16.       accessorFn: (row) => new Date(row.log_date),
  17.       filterFn: "greaterThanOrEqualTo",
  18.       sortingFn: "datetime",
  19.       id: "log_date",
  20.       Cell: ({ cell }) => cell.getValue()?.toLocaleDateString(),
  21.       Filter: ({ column }) => (
  22.         <LocalizationProvider dateAdapter={AdapterDayjs}>
  23.           <DatePicker
  24.             onChange={(newValue) => {
  25.               column.setFilterValue(newValue);
  26.             }}
  27.             slotProps={{
  28.               textField: {
  29.                 sx: { minWidth: "120px" },
  30.                 variant: "standard",
  31.               },
  32.             }}
  33.             value={column.getFilterValue()}
  34.           />
  35.         </LocalizationProvider>
  36.       ),
  37.     },
  38.     {
  39.       header: `${t("login_type")}`,
  40.       accessorKey: "log_type",
  41.     },
  42.   ],
  43.   []
  44. );
  45. <MaterialTable
  46.   data={logs}
  47.   columns={columns}
  48.   enableColumnOrdering
  49.   enableGrouping
  50.   enablePinning
  51.   enableRowNumbers
  52.   initialState={{
  53.     density: "compact",
  54.     showGlobalFilter: true,
  55.     showColumnFilters: true,
  56.   }}
  57. />;

数据结构如下：

  1. const data = [
  2.   {
  3.     log_date: "2023-06-02T04:01:43.665Z",
  4.     log_email_address: "test@gmail.com",
  5.     log_type: "login_email",
  6.     login_attempt_ip: "10.10.16.10",
  7.     user_id: "12334444"
  8.   }
  9. ];

我会感激任何帮助来解决这个问题 Material React Table简单过滤不起作用 无法读取null的属性（读取’value’） 谢谢！

英文:

Hello we've been using Material React Table npm package for showing data, but filtering isn't working, so every time I type a letter this error pops out

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

This is the code

  1. const columns = useMemo(
  2. () =&gt; [
  3. {
  4. header: `${t(&quot;login_title_email&quot;)}`,
  5. accessorFn: (row) =&gt; row.log_email_address,
  6. enableClickToCopy: true,
  7. filterVariant: &quot;text&quot;, // default
  8. },
  9. {
  10. header: `${t(&quot;login_title_ip&quot;)}`,
  11. accessorKey: &quot;login_attempt_ip&quot;,
  12. enableClickToCopy: true,
  13. },
  14. {
  15. header: `${t(&quot;login_title_date&quot;)}`,
  16. accessorFn: (row) =&gt; new Date(row.log_date),
  17. filterFn: &quot;greaterThanOrEqualTo&quot;,
  18. sortingFn: &quot;datetime&quot;,
  19. id: &quot;log_date&quot;,
  20. Cell: ({ cell }) =&gt; cell.getValue()?.toLocaleDateString(),
  21. Filter: ({ column }) =&gt; (
  22. &lt;LocalizationProvider dateAdapter={AdapterDayjs}&gt;
  23. &lt;DatePicker
  24. onChange={(newValue) =&gt; {
  25. column.setFilterValue(newValue);
  26. }}
  27. slotProps={{
  28. textField: {
  29. sx: { minWidth: &quot;120px&quot; },
  30. variant: &quot;standard&quot;,
  31. },
  32. }}
  33. value={column.getFilterValue()}
  34. /&gt;
  35. &lt;/LocalizationProvider&gt;
  36. ),
  37. },
  38. {
  39. header: `${t(&quot;login_type&quot;)}`,
  40. accessorKey: &quot;log_type&quot;,
  41. },
  42. ],
  43. []
  44. );
  45. &lt;MaterialTable
  46. data={logs}
  47. columns={columns}
  48. enableColumnOrdering
  49. enableGrouping
  50. enablePinning
  51. enableRowNumbers
  52. initialState={{
  53. density: &quot;compact&quot;,
  54. showGlobalFilter: true,
  55. showColumnFilters: true,
  56. }}
  57. /&gt;

Data structure is like this:

  1. const data = [
  2. {log_date: &quot;2023-06-02T04:01:43.665Z&quot;
  3. log_email_address: &quot;test@gmail.com&quot;
  4. log_type: &quot;login_email&quot;
  5. login_attempt_ip: 
  6. &quot;10.10.16.10&quot;
  7. user_id: &quot;12334444&quot;}
  8. ]

I would appreciate any kind of help to solve the issue Material React Table简单过滤不起作用 无法读取null的属性（读取’value’）
Thank you

答案1

得分: 1

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

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

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

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

  1. "react": "^18.2.0",
  2. "react-dom": "^18.2.0",
  2. <details>
  3. <summary>英文:</summary>
  4. 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.
  5. &gt; The SyntheticEvent is pooled. This means that the SyntheticEvent  
  6. &gt; object will be reused and all properties will be nullified after the  
  7. &gt; event callback has been invoked. This is for performance reasons. As  
  8. &gt; such, you cannot access the event in an asynchronous way.
  9. More about this event issue [here][1]
  10. After I upgraded to version 
  11. &quot;react&quot;: &quot;^18.2.0&quot;,   
  12. &quot;react-dom&quot;: &quot;^18.2.0&quot;,
  13. issue was solved.
  14. [1]: https://stackoverflow.com/questions/58059004/input-field-target-is-null-while-accessing-in-onchange-field-in-reactjs
  15. </details>

huangapple
  • 本文由 发表于 2023年6月2日 12:46:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76387191.html
  • filtering
  • javascript
  • material-react-table
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定