在使用 Vant 4 中, van-time-picker 在添加 filter 属性时选项消失遇到的问题

想要在 van-time-picker 中使用 filter 属性过滤分钟的选项,

在网上搜了很多资料, 基本上都是以下写法:

const timeFilter = (type, options) => {
    if (type === 'minute') {
        return options.filter((option) => Number(option) % 15 === 0);
    }
    return options;
};

实际使用后, 却产生以下不是我想要的结果:

分钟的选项完全消失了...

继续上网搜, 为什么会发生这样的结果?

没有搜到讨论原因的资料, 虽然有人提供别的解决办法

但我想找到原因, 从头理解这个问题的本源

接着我开始思考, 其实那段代码基本上能出问题的地方就只有:

options.filter((option) => Number(option) % 15 === 0);

所以我用下面代码探究 option 究竟是什么资料结构:

console.log(option);

发现他是这样的: 

 

原来他压根就不是个能用 Number() 函数转成数字的 string 啊!!

但是由此可知要怎么正确取得分钟的数值了!!

让我们改一下之前的代码:

const timeFilter = (type, options) => {
    if (type === 'minute') {
        return options.filter((option) => Number(option.value) % 15 === 0);
    }
    return options;
};

来看一下代码修改之后, van-time-picker 显示的结果:

成功 !!