“警告：道具类型失败”将 react-datepikcer 与 redux-form 一起使用时答案

【问题标题】："Warning: Failed prop type" When using react-datepikcer with redux-form“警告：道具类型失败”将 react-datepikcer 与 redux-form 一起使用时
【发布时间】：2019-02-15 17:45:55
【问题描述】：

我在“redux-form”旁边使用“react-datepicker”，我在控制台中不断收到此错误...

Warning: Failed prop type: Invalid prop `selected` of type `String` supplied to `DatePicker`, expected instance of `Date`.

“react-datepicker”的新版本没有使用“moment()”所以我找到的解决方案不起作用。

这是我的表单组件的样子...

import React, { Component } from "react";
import { compose } from "redux";
import { connect } from "react-redux";
import { reduxForm, Field } from "redux-form";
import DateInput from "../../form/DateInput";
import { subDays } from "date-fns";
import {
    combineValidators,
    isRequired
} from "revalidate";

class SignUpForm extends Component {
    onFormSubmit = values => {
        console.log(values);
    };

    render() {
        const { invalid, submitting, pristine } = this.props;
        return (
            <form onSubmit={this.props.handleSubmit(this.onFormSubmit)}>
                <Field
                    name="birthdate"
                    component={DateInput}
                    label="Birth Date"
                    dateFormat="yyyy-MM-dd"
                    showMonthDropdown
                    showYearDropdown
                    dropdownMode="select"
                    maxDate={subDays(new Date(), 366 * 18)}
                    showDisabledMonthNavigation
                />

                <Button
                    disabled={invalid || submitting || pristine}
                    type="submit"
                    size="big"
                    theme="black"
                >
                    Sign In
                </Button>
            </form>
        );
    }
}

const validate = combineValidators({
    birthdate: isRequired({ message: "Please choose your date of birth." })
});

export default compose(
    connect(
        null,
        actions
    ),
    reduxForm({ form: "signupForm", enableReinitialize: true, validate })
)(SignUpForm);

下面是“DateInput”组件的样子......

import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const DateInput = ({
    input: { value, onChange, ...restInput },
    label,
    meta: { touched, error, dirty },
    ...props
}) => {
    let groupClasses = touched && !!error ? "input-group error" : "input-group";

    return (
        <div className={groupClasses}>
            <DatePicker
                {...props}
                selected={value ? value : null}
                onChange={onChange}
                {...restInput}
            />
            {touched && !!error && <span className="error">{error}</span>}
        </div>
    );
};

export default DateInput;

任何帮助将不胜感激。

【问题讨论】：

您也可以尝试从input 属性中解构selected，并将其作为selected={new Date(selected)} 提供给DatePicker，看看是否可行。
我觉得你得parse redux-form 组件输出：parse={(dateString) => new Date(dateString)}
@Tholle 破坏了应用程序 :(
您是否尝试过添加placeHolderText 属性？ placeholderText="MM/DD/YYYY"
@ageoff 这与“Samuel Vaillant”答案的效果相同，即当我控制台的值时，有时日期会像这样“生日：1984 年 3 月 6 日星期二 00:00:00 GMT+0200（东欧标准时间）{}”，当我选择另一个日期时，它会变成这样的“生日：“1984-03-09”，这很奇怪。

标签： reactjs redux redux-form react-datepicker

【解决方案1】：

看起来提供给selected 属性的value 格式不正确。该值可能是redux-form 提供的字符串。如果格式正确，您可以使用以下字符串创建日期：new Date(value)。

selected={value ? new Date(value) : null}

您也可以使用redux-form提供的parse功能。

【讨论】：

我在询问之前确实尝试过这个解决方案，但是当我控制台的值有时会像这样“生日：Tue Mar 06 1984 00:00:00 GMT+0200 (Eastern European Standard Time) {}”，当我选择另一个日期时，它会变成这样的“生日：“1984-03-09”，这很奇怪。