使用Calendar组件时onFilter函数未触发，懒加载参数无法更新

核心问题原因 #

Calendar筛选时未触发onFilter，是因为filterCallback的参数格式不符合PrimeReact DataTable的预期——其他筛选组件（输入框、下拉框）传递的是包含value属性的事件对象，而你直接传递了日期值，导致DataTable无法识别筛选状态变化，进而不更新lazyParams，useEffect也不会触发。

另外，onFilter中直接修改传入的event对象（event['first'] = 0）违反了React状态更新的不可变性原则，可能导致状态更新不被检测到。

修复步骤 #

1. 修正Calendar的filterCallback参数传递
   修改dateFilterTemplate，将日期值包装成符合要求的对象传递给filterCallback：

   const dateFilterTemplate = (options) => {
       return <Calendar 
           value={options.value} 
           onChange={(e) => {           
               // 传递包含value的对象，匹配其他筛选组件的参数格式
               options.filterCallback({ value: e.value }, options.index);
           }} 
           dateFormat="yy-mm-dd" 
           placeholder="yyyy-mm-dd" 
           mask="9999-99-99" 
       />
   }
   

2. 确保状态更新的不可变性
   修改onFilter函数，创建新的参数对象而非直接修改原对象：

   const onFilter = (event) => {
       // 解构原event并添加first属性，生成新对象
       const updatedParams = {
           ...event,
           first: 0,
           page: 0 // 筛选后重置到第一页，提升用户体验
       };
       setLazyParams(updatedParams);
   }
   

3. 可选：验证日期匹配模式兼容性
   确认FilterMatchMode.DATE_IS与Calendar返回的日期类型匹配：如果Calendar返回的是Date对象，而后端需要字符串格式，可以在filterCallback中先转换格式，比如：

   onChange={(e) => {
       const formattedDate = e.value ? formatDate(e.value, 'yy-mm-dd') : null;
       options.filterCallback({ value: formattedDate }, options.index);
   }}
   

   （需引入PrimeReact的formatDate工具函数）

验证效果 #

修改后，选择Calendar日期时，filterCallback会正确触发DataTable的筛选逻辑，进而调用onFilter更新lazyParams，useEffect会检测到状态变化并执行loadLazyData。

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