在我的这个个人项目(恢复网络应用程序)上工作时,我遇到了这个相当常见的错误。
<块引用>警告:在 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>
);
}