Ошибка:
Uncaught 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 https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476)
at Object.useContext (react.development.js:1484)
at useTheme (useTheme.js:4)
at useTheme (useThemeWithoutDefault.js:8)
at useTheme (useTheme.js:6)
at useThemeProps (useThemeProps.js:8)
at useThemeProps (useThemeProps.js:7)
at Alert (Alert.js:124)
at renderWithHooks (react-dom.development.js:14985)
at updateForwardRef (react-dom.development.js:17044)
Action для отправки данных:
import { SetStateAction, Dispatch } from "react";
import {IUserDefaultInfo, IMessage} from "../interfaces";
export const register = async(user:IUserDefaultInfo, setMessage: Dispatch<SetStateAction<IMessage>>) => {
try {
const response = await fetch("http://localhost:5000/api/auth/register", {
method: "POST",
body: JSON.stringify(user),
headers: {
"Content-Type": "application/json"
}
})
response.json().then(data => {
if (!response.ok) {
setMessage({
text: data.message,
type: "error"
});
} else {
setMessage({
text: data.message,
type: "success"
});
}
})
} catch(e:any) {
console.log(e);
setMessage({
text: e.message,
type: "error"
});
}
}
Component, где я его вызываю:
import React from 'react';
import { NavLink } from 'react-router-dom';
import { register } from '../actions/Auth';
import MyInput from '../components/input/myInput';
import MySubmit from '../components/submit/mySubmit';
import {IMessage, IUserDefaultInfo} from "../interfaces";
import Alert from '@mui/material/Alert';
const Register: React.FC = () => {
const [user, setUser] = React.useState<IUserDefaultInfo>({
name: "", email: "", password: ""
});
const [message, setMessage] = React.useState<IMessage>({
text: "", type: "success"
})
return (
<div className="register">
<div className="container">
{message.text && <Alert severity={message.type}>{message.text}</Alert>}
<h2 className="title">Регистрация</h2>
<div className="form">
<div className="form__input">
<label htmlFor="name" className="form__label">Имя пользователя</label>
<MyInput
type="text"
id="name"
value={user.name}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => setUser({...user, name: event.target.value})}
/>
</div>
<div className="form__input">
<label htmlFor="email" className="form__label">Электронная почта</label>
<MyInput
type="email"
id="email"
value={user.email}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => setUser({...user, email: event.target.value})}
/>
</div>
<div className="form__input">
<label htmlFor="password" className="form__label">Пароль</label>
<MyInput
type="password"
id="password"
value={user.password}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => setUser({...user, password: event.target.value})}
/>
</div>
<MySubmit onClick={() => register(user, setMessage)}>Зарегистрироваться</MySubmit>
</div>
<p className="text">
Есть аккаунт? <NavLink to="/login">Войти</NavLink>
</p>
</div>
</div>
)
}
export default Register;
Я так понял, что проблема в хуках (где я их вызываю), но не могу понять где и какой хук я вызвал не там.
Простой
