reactjs - 来自 formik-material-ui-pickers 的两个 Datepicker 发生碰撞
问题描述
我有一个 Formik 表单,其中有两个来自formik -material-ui-pickers 的 Datepicker
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",
解决方案
推荐阅读
- amazon-web-services - AWS EC2 目标跟踪扩展策略 - 扩展多个实例
- authentication - "detail": "未提供身份验证凭据。"
- php - PHP词比较和加权
- azure - Kudu 控制台 - 还原更改
- ionic3 - Ionic 2/3 iOS:将文件保存到 iCloud、Google Drive 等驱动应用程序中
- react-native - 反应导航自定义比例过渡动画,例如应用程序打开时
- javascript - SVG:在折线上应用过滤器隐藏折线
- vba - 使用用户窗体和文本框名称作为函数的参数
- angular - Angular 2 Http在正文上获取返回类型3错误
- jquery - 在 datetimepicker 引导程序中选择前一天后仅显示一天