如何根据下拉选择项变化将moment类型的日期选择器值置为空

可按以下步骤修改解决：

1. 修正useEffect触发逻辑
   你当前的useEffect仅在selectedLeaveId为真值时才执行清空操作，若下拉切换的前后值都为非空真值，或是切换到空值时就无法触发清空。直接移除if判断，只要selectedLeaveId发生变化就执行清空逻辑。
2. 替换空值为null
   大部分React生态的日期选择器组件（比如Ant Design、MUI的日期组件）默认识别的空值是null而非undefined，你可以把设置undefined改为设置null，同时调整state的类型定义适配。
3. 兜底强制重挂载方案
   如果你的StyleDatePicker是二次封装的组件，内部维护了独立状态没有和外部传入的value同步，可以给两个日期组件绑定key属性为selectedLeaveId，每次下拉变更时组件会直接销毁重建，100%保证清空效果。

修改后的参考代码：

// 调整state类型，支持null
const [startDate, setStartDate] = useState<moment.Moment | null>(null);
const [endDate, setEndDate] = useState<moment.Moment | null>(null);

const onChange = useCallback(
  (value) => {
    setEndDate(value);
  },
  [setEndDate, setIsMoreThenBalance]
);

const onChangeStartDate = useCallback(
  (value) => {
    setStartDate(value);
  },
  [setStartDate]
);

// 移除if判断，每次selectedLeaveId变化就清空
useEffect(() => {
  setStartDate(null);
  setEndDate(null);
}, [selectedLeaveId]);

return(
  <StyleDatePicker
    // 绑定key，兜底强制刷新
    key={`start-${selectedLeaveId}`}
    onChange={(date) => {
      onChangeStartDate(date);
    }}
    disabledDate={disableStartDate}
    value={startDate}
    format="DD/MM/YYYY"
    autoFocus
  />

  <StyleDatePicker
    key={`end-${selectedLeaveId}`}
    onChange={(date) => {
       onChange(date);
    }}
    value={endDate}
    disabled={!startDate}
    disabledDate={disableEndDate}
    $isThereError={isMoreThenBalance}
    format="DD/MM/YYYY"
   />
)

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