Два Datepickers из formik-material-ui-pickers сталкиваются - PullRequest
Новая
       26

Два Datepickers из formik-material-ui-pickers сталкиваются

1 голос
/ 29 января 2020

У меня есть форма Formik, где у меня есть два Datepickers из formik-material-ui-pickers 

import {Field, Form} from "formik";
import React from "react";
import Button from "@material-ui/core/Button";
import { TextField } from "formik-material-ui";
import { DatePicker } from "formik-material-ui-pickers";
import InputAdornment from "@material-ui/core/InputAdornment";
import "./drillForm.css"

export function DrillForm(props) {
    return (
    <Form className="drillForm" onSubmit={props.handleSubmit}>
      <div className="fieldSet">
        <DatePicker label="Fabricacíon" name="built" />*
        <DatePicker label="Garantía" name="warranty" />
     </div>
    </Form>   );

}

Если Я удаляю любые из них, оставшиеся DatePicker работают как брелок, но если я пытаюсь использовать их вместе, они сталкиваются с этой повторяющейся ошибкой 

index.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    in PickerWithState (created by FormikMaterialUIDatePicker)
    in FormikMaterialUIDatePicker (at drillForm.jsx:23)
    in div (at drillForm.jsx:21)
    in div (at drillForm.jsx:12)
    in form (created by Form)
    ...

Это компонент, где я получаю данные и отображаю форму 

import React, { useEffect } from "react";
import { useHistory} from "react-router";
import { useDispatch, useSelector } from "react-redux";
import { Formik } from "formik";

import {actions as drillActions} from "../../../ducks/drills";

import CircularProgress from "@material-ui/core/CircularProgress";
import {DrillForm} from "../../elements/forms/drillForm";
import Paper from "@material-ui/core/Paper";

import "./drillEdit.css"
import moment from "moment";

export default function ({idx}) {
    const history = useHistory();
    const dispatch = useDispatch();
    const {username, token} = useSelector(({user})=> user);
    const [drill, updating, errors] =
        useSelector(({drills})=> [drills.drills[idx], drills.update, drills.errors]);

    useEffect(
        () => {
            dispatch(drillActions.get(username, token, idx));
        }, []
    );
    console.log("form Drill", {...drill});
    return (
        <Paper className="editForm">
            <div>
                <h1>{drill?drill.name:"Collecting Data"}</h1>
                <h2>{drill?"Edit your drill " : "It may take few seconds"}</h2>
            </div>
            <div>
                {drill?
                    <Formik
                        initialValues={drill}
                        initialErrors={errors}
                        onSubmit={(values, actions) => {
                            dispatch(drillActions.update(username, token, values));
                            actions.setSubmitting(false);
                        }}
                    >
                        {formikProps => <DrillForm {...formikProps} history={history}
                                                   updating={updating}/>}
                    </Formik>
                    : <CircularProgress/>
                }
            </div>
        </Paper>);

Это мои зависимости: 

"@material-ui/core": "^4.8.3",
"@material-ui/icons": "^4.5.1",
"@material-ui/styles": "^4.8.2",
"@material-ui/pickers": "^3.2.10",
"@reduxjs/toolkit": "^1.2.3",
"formik": "^2.1.2",
"formik-material-ui": "^2.0.0-alpha.2",
"formik-material-ui-pickers": "^0.0.4",
"material-ui-popup-state": "^1.5.1",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-observable": "^1.2.0",
"remote-redux-devtools": "^0.5.16",
"@date-io/moment": "1.3.13",
...