React自定义多选日期组件触发useState不支持第二回调参数报错如何解决

State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().

该报错的核心原因是：Hook 版本的 setState 不支持传入第二个回调参数（仅 Class 组件的 setState 支持该用法），而你的代码中存在给 setDates 传递超过1个参数的情况。

进一步定位：你直接将 useState 返回的 setDates 作为 onChange 回调传给了自定义日期组件，而 AntD 组件的事件回调默认会传递多个参数（比如 Select 的相关事件除了返回选中值，还会返回完整的选项对象作为第二个参数），多出来的参数被透传给 setDates，React 识别到第二个参数就会抛出该错误。

两种修复方式任选其一即可：

方案1：父组件侧修改（最简便） #

不要直接把 setDates 传给 onChange，用箭头函数包一层，仅接收第一个参数更新状态：

// 修改父组件的调用代码
<MultipleDatePicker 
  value={dates} 
  onChange={(val) => setDates(val)} 
/>

不管事件回调传递多少个参数，setDates 只会接收第一个值，不会触发多参数报错。

方案2：自定义组件侧修改 #

在自定义组件的 onChange 调用处，严格控制仅传递日期数组一个参数，同时覆盖 Select 所有默认事件回调，避免额外参数透传：

// 所有调用onChange的逻辑都确保只传一个参数，以_onChange为例
const _onChange = useCallback(
  selected => {
    const index = arrValues.findIndex(e => e.isSame(selected));
    const temp = [...arrValues];
    if (index !== -1) {
      temp.splice(index, 1);
    } else {
      temp.push(selected);
    }
    onChange?.(temp);
  },
  [arrValues, onChange]
);

// 给Select组件显式指定空onChange，覆盖默认行为避免多余回调触发
<Select
  // 保留其他原有属性不变
  onChange={() => {}}
/>

你当前用了 React.forwardRef 但没有把 ref 绑定到内部的 Select 或其他 DOM 节点上，如果不需要对外暴露组件实例可以去掉 forwardRef 避免不必要的性能损耗。

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