Когда я отправляю форму, я получаю предупреждение ниже. Компонент размонтирован после отправки. Как это исправить?
Предупреждение. Невозможно выполнить обновление состояния React на отключенном компоненте. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect.
в Formik (в ItemCodeSpecForm. js: 82) в модальном режиме (в ItemCodeSpecForm. js: 80) в ErrorBoundary (в ItemCodeSpecForm . js: 77) в Suspense (в ItemCodeSpecForm. js: 76) в div (в ItemCodeSpecForm. js: 74) в ItemCodeSpecForm (в EditItemCodeSpe c. js: 61) в div (в EditItemCodeSpe c. js: 60)
Ниже приведена форма
<code>function ItemCodeSpecForm({ formType, mutation, removeSelect, initialData }) {
const { number } = useParams();
const itemCode = parseInt(number);
const [open, setOpen] = useState(false);
const client = useApolloClient();
const gradeOptions = [
{ value: "HUMAN", label: "HUMAN" },
{ value: "DEFAULT", label: "DEFAULT" }
];
const specClassOptions = [
{ value: "DS", label: "DS" },
{ value: "STAB", label: "STAB" }
];
const defaultAdditional = {
cursor: null
};
const shouldLoadMore = (scrollHeight, clientHeight, scrollTop) => {
const bottomBorder = (scrollHeight - clientHeight) / 2;
return bottomBorder < scrollTop;
};
const loadOptions = async (q = 0, prevOptions, { cursor }) => {
console.log("qu", q * 1);
const options = [];
console.log("load");
const response = await client.query({
query: GET_PRODUCTS,
variables: {
filter: {
number_gte: q * 1
},
skip: 0,
first: 5,
after: cursor
}
});
console.log("res", response);
response.data.products.products.map(item => {
options.push({
value: item.number,
label: `${item.number} ${item.description}`
});
});
return {
options,
hasMore: response.data.products.hasMore,
additional: {
cursor: response.data.products.cursor.toString()
}
};
};
const handleShow = () => {
setOpen(true);
};
const handleHide = () => {
setOpen(false);
};
return (
<div className="modal">
<button onClick={handleShow}>{formType}</button>
<Suspense fallback={<div>Loading...</div>}>
<ErrorBoundary>
{open ? (
<Modal>
<button onClick={handleHide}>✖</button>
<Formik
initialValues={{
product: !!initialData
? { value: initialData.product, label: initialData.product }
: "",
spec_class: !!initialData
? {
value: initialData.spec_class,
label: initialData.spec_class
}
: "",
grade: !!initialData
? { value: initialData.grade, label: initialData.grade }
: ""
}}
validationSchema={Yup.object().shape({
product: Yup.string().required("Required"),
spec_class: Yup.string().required("Required"),
grade: Yup.string().required("Required")
})}
onSubmit={(data, { setSubmitting, resetForm }) => {
setSubmitting(true);
const { product, spec_class, grade } = data;
console.log({
variables: {
input: {
itemCode,
product: product.value,
spec_class: spec_class.value,
grade: grade.value
}
}
});
formType === "Add" ? console.log("a") : console.log("e");
formType === "Add"
? mutation({
variables: {
input: {
itemCode,
product: product.value,
spec_class: spec_class.value,
grade: grade.value
}
}
})
: mutation({
variables: {
id: initialData.id,
input: {
product: product.value,
spec_class: spec_class.value,
grade: grade.value
}
}
});
setSubmitting(false);
resetForm();
}}
>
{({
values,
isSubmitting,
handleChange,
setFieldValue,
touched,
errors
}) => (
<Form>
<label htmlFor="product">Product</label>
<AsyncPaginate
name="product"
defaultOptions
debounceTimeout={300}
cacheOptions
additional={defaultAdditional}
value={values.product && values.product}
loadOptions={loadOptions}
onChange={option => setFieldValue("product", option)}
shouldLoadMore={shouldLoadMore}
/>
{touched.product && touched.product ? (
<div>{errors.product}</div>
) : null}
<label htmlFor="grade">Grade</label>
<Select
name="grade"
defaultValue={values.grade}
value={
gradeOptions
? gradeOptions.find(
option => option.value === values.grade
)
: ""
}
options={gradeOptions}
onChange={option => setFieldValue("grade", option)}
/>
{errors.grade && touched.grade ? <div>Required</div> : ""}
<label>Spec Class</label>
<Select
name="spec_class"
defaultValue={values.spec_class}
value={
specClassOptions
? specClassOptions.find(
option => option.value === values.spec_class
)
: ""
}
options={specClassOptions}
onChange={option => setFieldValue("spec_class", option)}
/>
{touched.spec_class && errors.spec_class ? (
<div>Required</div>
) : (
""
)}
<div>
<button disabled={isSubmitting} type="submit">
Submit
</button>
</div>
<pre>{JSON.stringify(values, null, 2)} )} ): null} ); }