我该怎么做才能解决这个 findDOMNode 问题？

如何解决我该怎么做才能解决这个 findDOMNode 问题？

在我的这个个人项目（恢复网络应用程序）上工作时，我遇到了这个相当常见的错误。

警告：在 StrictMode 中不推荐使用 findDOMNode。 findDOMNode 是 传递了 StrictMode 内的 Transition 实例。反而， 直接向要引用的元素添加 ref。

每次我点击并展开 AccordionSummary 或呈现 AccordionDetails 时，似乎都会弹出警告。

我不熟悉 refs 绝对是原因。我已经尝试阅读关于 refs 的 React 文档，并尝试了所有我可以使用的代码，但仍然无法理解原因和用法。

以下是有关该问题的相关代码：

FormView.js

import React,{ useState } from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import ExperienceComponent from "./ExperienceComponent";

/* TODO: fix findDOMNode error */
export default function FormView() {

  const [employmentData,setEmploymentData] = useState([]);
  return (
    <form>

      //irrelevant block of code...

      <div className="employmentHistory">
        <h2>Employment History</h2>
        {employmentData.map((data,i) => {
          return <ExperienceComponent key={i} />;

               ^^ This is what seems to be causing it ^^
        })}
        <Button
          onClick={() => {
            setEmploymentData([...employmentData,{}]);
          }}
        >
          <p>Add Employment</p>
        </Button>
      </div>
    </form>
  );
}

ExperienceComponent.js

import React,{ useState } from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import {
  MuiPickersUtilsProvider,KeyboardDatePicker,} from "@material-ui/pickers";
import Typography from "@material-ui/core/Typography";
import DateFnsUtils from "@date-io/date-fns";
import TextField from "@material-ui/core/TextField";
import DeleteIcon from "@material-ui/icons/Delete";
import Button from "@material-ui/core/Button";

// general component for jobs,courses,certificates,and education etc.
export default function ExperienceComponent(props) {
  // variable for the "variant" part of a TextInput component
  const variant = "outlined";

  const formatDate = (date) => {
    var dunno = new Date(date);
    const options = { year: "numeric",month: "short",day: "numeric" };
    return dunno.toLocaleDateString(...Array(1),options);
  };

  const DatePicker = ({ header,name,date,func }) => {
    return (
      <KeyboardDatePicker
        format="MM/dd/yyyy"
        margin="normal"
        name={name}
        label={header}
        value={date}
        onChange={func}
        KeyboardButtonProps={{
          "aria-label": "change date",}}
      />
    );
    // repetitive code
  };
  const changeStartingDate = (date) => {
    //TODO: trigger callback function to save data to parent
    // e.g. SaveDataObject();
    setExperience({ ...exp,startingDate: date });
  };
  // repetitive code
  const changeEndingDate = (date) => {
    //TODO: trigger callback function to save data to parent
    // e.g. SaveDataObject();
    setExperience({ ...exp,endingDate: date });
  };

  const onTextChange = (e) => {
    //TODO: trigger callback function to save data to parent
    // e.g. SaveDataObject();
    setExperience({ ...exp,[e.target.name]: e.target.value });
  };

  const [exp,setExperience] = useState({
    title: "",institution: "",city: "",startingDate: new Date().toString(),endingDate: new Date().toString(),});

  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <div>
          <p>
            {exp.title} at {exp.institution}
          </p>

          <p>
            {formatDate(exp.startingDate)} - {formatDate(exp.endingDate)}
          </p>
        </div>
        <Button>
          <DeleteIcon />
        </Button>
      </AccordionSummary>
      <AccordionDetails>
        <div>
          <div>
            <TextField
              label="Title"
              variant={variant}
              value={exp.title}
              onChange={onTextChange}
              name="title"
            />
            <TextField
              label="Institution"
              variant={variant}
              value={exp.institution}
              onChange={onTextChange}
              name="institution"
            />
          </div>
          <div>
            <div>
              <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DatePicker
                  header="Starting date"
                  name="startingDate"
                  date={exp.startingDate}
                  func={changeStartingDate}
                />
                <DatePicker
                  header="Ending date"
                  name="endingDate"
                  date={exp.endingDate}
                  func={changeEndingDate}
                />
              </MuiPickersUtilsProvider>
            </div>
            <TextField
              label="City"
              variant={variant}
              value={exp.city}
              onChange={onTextChange}
              name="city"
            />
          </div>
          <TextField multiline variant={variant} rows={5} label="Description" />
        </div>
      </AccordionDetails>
    </Accordion>
  );
}