Invalid prop: custom validator check failed for prop “value“

问题描述

今天在写vue项目的时候，看console有一个报错，

Invalid prop: custom validator check failed for prop “value“

看见这种大片的爆红，就好烦躁
虽然这样的爆红不影响程序运行，但是作为一个有强迫症的程序猿，怎么都忍受不了这个问题的呈现

问题排查

顺着提示的报错位置找到日期选择框：

<a-range-picker
      :value="createTime"
      :getCalendarContainer="triggerNode => triggerNode.parentNode "
      :ranges="{
        今天：[moment(),moment()],
        最近三天：[moment().subtract(2,'days'),moment()],
        最近一周：[moment().subtract(6,'days'),moment()],
        最近1月：[moment().subtract(1,'moths'),moment()],
        }"
        @change="handleCreateTimeChange"
    />

也找到了相关的参数如下

createTime："",
beginCreateTime:"",
endCreateTime:"",

相关的方法

handleCreateTimeChange（date）{
  this.createTime= value;
  this.beginCreateTime= value[0]?moment(value[0].format("YYYY-MM-DD")):"";
  this.endCreateTime= value[1]?moment(value[0].format("YYYY-MM-DD")):"";
  
}

看着也是没什么问题的

问题解决

既然从表面是哪个没看出什么问题，然后回归问题的本身：

自定义的验证程序对 value 检查失败，思考：这个组件里面也没有见value啊,那就是有隐藏的value，不就是createTime么，那我们就关注这个的数据类型和被赋予的值，

①数据类型

createTime："",//字符串类型

②被赋予的值

this.createTime= date；//这个date是是个数组额，

原来如此，数据类型不对应，这样改就可以了

createTime：[],

结论

rangePicker接受的是数组类型的数组