Ошибка хуков: Next.js и проверка формы пользовательского интерфейса материала
Я пытаюсь настроить диалоговое / модальное окно для подписки моих пользователей на информационный бюллетень. Код был полностью функциональным, когда это было обычное приложение React, но сейчас я конвертирую его в Next.js. Теперь я получаю RuntimeError с жалобой на неправильную настройку хуков. Раньше у меня были проблемы с запуском Material UI вместе с next.js. но это выяснилось. Однако я потерялся здесь, кто-нибудь знает, что происходит?
Мой компонент:
import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { Grid } from "@material-ui/core";
import React from "react";
import Slide from "@material-ui/core/Slide";
export default function EmailPopUp() {
const [showOpen, setShowOpen] = React.useState(true);
const [open, setOpen] = React.useState(showOpen);
const [form, setForm] = React.useState({
submitted: false,
formData: { email: "" },
});
const refInput = React.useRef("form");
const isBrowser = () => typeof window !== "undefined";
const handleClickOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const handleChange = (event) => {
const { formData } = form;
formData[event.target.name] = event.target.value;
setForm({ formData });
};
const handleSubmit = () => {
this.setForm({ submitted: true }, () => {
formSubmitAction();
});
};
const formSubmitAction = () => {
fetch(`${process.env.NEXT_PUBLIC_BACKEND_API}subscribe_newsletter/`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
email: form.formData.email,
}),
}).finally(handleClose());
};
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
return (
isBrowser && (
<div className="dialog-container">
<Dialog
disableBackdropClick={true}
open={open}
TransitionComponent={Transition}
keepMounted
onClose={handleClose}
aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-description"
>
<DialogTitle id="alert-dialog-slide-title">
Newsletter
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-slide-description">
<Grid container spacing={2} justify="center">
<Grid item xs="auto">
<img
src="/images/newsletter-img.jpg"
className="newsletter-image"
/>
</Grid>
<Grid item xs="auto">
<div className="dialog-content">
</div>
<ValidatorForm ref={refInput} onSubmit={handleSubmit}>
<TextValidator
label="Email"
onChange={handleChange}
name="email"
value={form.formData.email}
validators={["required", "isEmail"]}
errorMessages={[
"this field is required",
"email is not valid",
]}
/>
<div className="newsletter-button">
<Button
type="submit"
variant="contained"
color="secondary"
>
Subscribe
</Button>
</div>
</ValidatorForm>
</Grid>
</Grid>
</DialogContentText>
</DialogContent>
</Dialog>
</div>
)
);
}
Трассировка стека:
Unhandled Runtime Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See for tips about how to debug and fix this problem.
Call Stack
resolveDispatcher
../node_modules/react/cjs/react.development.js (1465:0)
Object.useContext
../node_modules/react/cjs/react.development.js (1473:0)
useTheme
../node_modules/@material-ui/styles/esm/useTheme/useTheme.js (4:19)
useStyles
../node_modules/@material-ui/styles/esm/makeStyles/makeStyles.js (222:24)
WithStyles
../node_modules/@material-ui/styles/esm/withStyles/withStyles.js (55:0)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (14803:0)
updateForwardRef
node_modules/react-dom/cjs/react-dom.development.js (16816:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (18645:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (188:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (237:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (292:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (23203:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (22154:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (22130:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (21756:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (11089:0)
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js (653:0)
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js (11039:0)
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js (11084:0)
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js (11072:0)
flushSync
node_modules/react-dom/cjs/react-dom.development.js (21932:0)
Object.scheduleRefresh
node_modules/react-dom/cjs/react-dom.development.js (11626:0)
eval
node_modules/react-refresh/cjs/react-refresh-runtime.development.js (304:0)
Set.forEach
<anonymous>
Object.performReactRefresh
node_modules/react-refresh/cjs/react-refresh-runtime.development.js (293:0)
eval
node_modules/@next/react-refresh-utils/internal/helpers.js (124:0)
1 ответ
Этот вопрос решен. После нескольких часов исследований и попыток. Поскольку я проводил рефакторинг, приложение для реагирования на NextJs, я все еще использовал один файл со старым приложением из родительского каталога. Я перемещаю все файлы в один каталог, и теперь он работает. Но глупо!:)