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

Question

在我的这个个人项目（Resume web app）上工作时，我遇到了这个相当常见的错误。

警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 被传递了一个在 StrictMode 中的 Transition 实例。相反，直接将 ref 添加到要引用的元素。

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

我对裁判的不熟悉肯定是原因。我已经尝试阅读有关 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>
  );
}

标签： javascriptreactjswarningsref