reactjs - 尝试编辑表单时超过反应警告最大更新深度

Question

我的应用程序中有一个只读表单，当我单击编辑按钮时，它会将我带到编辑屏幕，但没有响应。当我打开控制台时，它显示下面给出的错误

超过最大更新深度。当组件在 useEffect 中调用 setState 时，可能会发生这种情况，但 useEffect 要么没有依赖数组，要么每次渲染时依赖项之一发生变化。

这是我的编辑屏幕代码

import { React, useEffect, useRef, useState } from "react";

import { globalFormStyling } from "../../../GlobalCommonStyling";
import { useHistory } from "react-router";
import { Navbar, SideBar } from "../../../../componenets/CommonComponents";
import JobForm from "../JobForm";
import { Grid } from "@material-ui/core";
import {
  FormInputButton,
  HollowButton,
} from "../../../../componenets/Theme/WebButtons";
import { jobEditedColumn } from "../JobValidation";

export default function EditJob(props) {

  for (var i=0; i< sessionStorage.length; i++) {
    if(["JobInfo","EditJobFormVal","stateVars"].indexOf(sessionStorage.key(i))<0
    ) {
      sessionStorage.removeItem(sessionStorage.key(i))
    }
  }
  let history = useHistory();

  var getData;
  if(sessionStorage.getItem("JobInfo")) {
    getData = JSON.parse(sessionStorage.getItem("JobInfo"))
  }else {
    getData = props.location.state.inputData;
    sessionStorage.setItem("JobInfo", JSON.stringify(getData));
  }

  const classes = globalFormStyling();
  const [newData, getNewData] = useState([]);
  const storeData = useRef(getData);

  useEffect(() => {
    for (const [key] of Object.entries(newData)) {
      storeData.current[0][jobEditedColumn[key]] = newData[key];
    }
  }, []);

  function onSuccess(isWarning)
  {
    sessionStorage.setItem("JobInfo", JSON.stringify(storeData.current));
    history.push("/SelfService/Jobs/JobInfo")
  }

  return (
    <div>
      <Navbar head={"Edit Job"} />
      <SideBar selected={7} />
      <div className={classes.gridLevelScreenDividing}>
        <div></div>
        <div>
          <JobForm marginTop="5.5%" minHeight="75%" existingDat={getData} getNewData={getNewData} onSuccess={onSuccess}/>
        </div>
        <div></div>
      </div>
      <div className={classes.bottomButtonStyling}>
        <Grid container>
          <Grid item sm={3} xs={1}>
            <div></div>
          </Grid>
          <Grid item container justify="center" spacing={3}>
            <Grid item>
              <HollowButton
                borderColor="black"
                inputWidth="136px"
                onClick={() => {
                  history.push("/SelfService/Jobs/JobInfo");
                }}
                style={{ marginTop: "13%" }}
              >
                Cancel
              </HollowButton>
            </Grid>
            <Grid item>
              <FormInputButton
                borderColor="black"
                inputWidth="136px"
                style={{ marginTop: "13%" }}
                type="submit"
                form={"jobDetailsForm"}
              />
            </Grid>
          </Grid>
          <Grid item sm={3} xs={1}>
            <div></div>
          </Grid>
        </Grid>
      </div>
    </div>
  );
}

标签： reactjsreact-hooksuse-effectformikuse-state