Question

我在React js中使用日期选择器 https://www.npmjs.com/package/react-datepicker 但是我的当前值为空白null。现在，当我专注于input field时，我想显示日期选择器。但是我遇到错误/警告这是为什么？

proxyConsole.js:72 Warning: Failed prop type: Invalid prop `selected` of type `String` supplied to `Calendar`, expected instance of `Date`.
    in Calendar (created by OnClickOutside(Calendar))
    in OnClickOutside(Calendar) (created by DatePicker)
    in div (created by InnerPopper)
    in InnerPopper (created by Context.Consumer)
    in Popper (created by PopperComponent)
    in Manager (created by PopperComponent)
    in PopperComponent (created by DatePicker)
    in DatePicker (created by Main)

实际上我在转换数据时添加了一个条件

 data[i].displaytext = i;
        if (data[i].dataType === "DATE" && data[i].value) {
          data[i].value = new Date(data[i].value);
        }
        obj[lastLabel] = [...obj[lastLabel], data[i]];
      }

这是我的代码 https://codesandbox.io/s/rmx02zzr5o

请帮助我删除此警告

Answer 1

看起来value对象中的默认DOB是字符串，但是您要传递给它的组件期望Date。好像在改变

DOB: {
    value: "",
    type: "FIELD",
    editable: true,
    dataType: "DATE",
    required: true,
    displayName: null,
    pattern: null
}

到

DOB: {
    value: null, // <- specifically this line
    type: "FIELD",
    editable: true,
    dataType: "DATE",
    required: true,
    displayName: null,
    pattern: null
}

至少可以使错误消失并且日期选择器正常运行，至少在它在文本字段中设置值的范围内即可。

提供给“日历”（预期日期为“日期”）的类型为“字符串”的无效道具“已选择”。

1 个答案: