«Предупреждение: Failed prop type» При использовании response-datepikcer с избыточной формой - PullRequest
Новая
       46

«Предупреждение: Failed prop type» При использовании response-datepikcer с избыточной формой

0 голосов
/ 15 февраля 2019

Я использую «response-datepicker» вместе с «redux-form», и я получаю эту ошибку в консоли ... 

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

Новая версия «response-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;

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 15 февраля 2019

Похоже, что value, предоставленный для selected, неправильный формат.Значение, вероятно, является строкой, предоставленной redux-form.Вы можете создать дату из строки, если формат правильный с: new Date(value). 

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

Вы также можете использовать функцию parse, предоставляемую redux-form.

...