-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. #9
Comments
не знаю как профиксить ошибку, строка с ошибкой помечена комментарием /* тут ошибка */. |
После того, как я успешно авторизуюсь, меня переводит на домашнюю страницу и тогда я имею эту ошибку в консоли |
//import { saveAuthorisation, isAuthorised } from '../../utils/auth'
import { useIntl } from 'react-intl'
import Page from '../../containers/Page/Page'
import React, { useState, useContext, useRef, useEffect } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { Paper, Button, Typography, TextField, Link, Box } from '@material-ui/core'
import ConfigContext from '../../providers/Config/Context'
import MenuContext from '../../providers/Menu/Context'
import ReCAPTCHA from "react-google-recaptcha";
import OnlineContext from '../../providers/Online/Context'
const useStyles = makeStyles((theme) => ({
paper: {
width: 'auto',
marginLeft: theme.spacing(3),
marginRight: theme.spacing(3),
[theme.breakpoints.up(620 + theme.spacing(6))]: {
width: 400,
marginLeft: 'auto',
marginRight: 'auto'
},
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`
},
avatar: {
margin: theme.spacing(1),
width: 192,
height: 192,
color: theme.palette.secondary.main,
},
form: {
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
container: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: `100%`,
},
}))
const SignIn = () => {
const isOnline = useContext(OnlineContext)
const [message, setMessage] = useState(false);
const [hasError, setError] = useState(false);
const [isLoading, setLoading] = useState(false);
const recaptchaRef = useRef({});
const classes = useStyles()
const intl = useIntl()
const { appConfig } = useContext(ConfigContext)
const { login, key } = appConfig.auth;
const [credentials, setCredentials] = useState({
username: '',
password: ''
});
const [changes, setChanges] = useState(false);
const { setAuthMenuOpen } = useContext(MenuContext)
const onChange = ({ target: { name, value } }) => {
setChanges(true)
setCredentials(Object.assign(Object.assign({}, credentials), { [name]: value }));
};
const putError = (msg) => {
setError(true);
setMessage(msg);
}
const resetMsg = () => {
setError(false);
setMessage("");
}
const resetCa = () => {
if (recaptchaRef && recaptchaRef.current && recaptchaRef.current.reset) {
recaptchaRef.current.reset()
}
}
const verifyCallback = function (value) {
if (!changes) { setLoading(false); return; }
//try {
fetch('./api/Auth/authenticate', {
method: 'post',
headers: {
'Content-Type': 'application/json',
'g-recaptcha-response': value
},
body: JSON.stringify(credentials)
})
.then(response => {
if (response.status === 202) {
resetMsg()
return response.json()
}
else {
return Promise.reject(response)
}
})
.then(token => {
authenticate(token);
}).catch((e) => {
if (e.status === 400) {
putError("Вы не прошли валидацию reCAPTCHA, попробуйте снова")
}
else if (e.status === 401) {
putError("Неправильное имя пользователя или пароль")
}
else if (e.status === 555) {
putError("Служба каталогов недоступна. Пожалуйста, обратитесь к администратору сети")
}
else if (e.status > 401) {
putError("Ошибка авторизации")
}
setLoading(false)
resetCa();
setChanges(false)
});
//} catch (e) {
// putError("Ошибка авторизации")
// setLoading(false)
// resetCa();
// resetMsg();
// setChanges(false)
// throw e
//}
};
const onSubmit = (event) => {
resetMsg();
if (event) {
event.preventDefault();
}
setLoading(true)
try {
recaptchaRef.current.execute()
} catch (e) {
console.error('onSubmit', e);
}
}
const authenticate = (token) => {
login(token)
setAuthMenuOpen(false)
setLoading(false)
resetCa();
setChanges(false)
resetMsg();
}
return (
<Page pageTitle={intl.formatMessage({ id: 'sign_in' })} isLoading={isLoading}>
<Paper className={classes.paper} elevation={6}>
<div className={classes.container}>
<Typography component="h1" variant="h5">
{intl.formatMessage({ id: 'sign_in' })}
</Typography>
<form className={classes.form} onSubmit={onSubmit}>
<ReCAPTCHA
ref={recaptchaRef}
size="invisible"
sitekey={key}
onChange={verifyCallback}
/>
<TextField
value={credentials.username}
onInput={onChange}
variant="outlined"
margin="normal"
required
fullWidth
id="username"
label={intl.formatMessage({ id: 'username' })}
name="username"
autoComplete="username"
autoFocus
disabled={isLoading || !isOnline}
/>
<TextField
value={credentials.password}
onInput={onChange}
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label={intl.formatMessage({ id: 'password' })}
type="password"
id="password"
autoComplete="current-password"
disabled={isLoading || !isOnline}
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
disabled={isLoading || !isOnline}>
{intl.formatMessage({ id: 'sign_in' })}
</Button>
<Box visibility={hasError ? 'visible' : 'hidden'} color='error.main' fontSize={12} align="justify">
{message}
</Box>
<Box color="text.disabled" fontSize={12} align="justify">
Этот сайт защищен reCAPTCHA и Google.<br />
<Link underline="hover" color="textSecondary" href="https://policies.google.com/privacy"> Политика конфиденциальности </Link>,
применяются <Link color="textSecondary" underline="hover" href="https://policies.google.com/terms"> Условия использования </Link>.
</Box>
</form>
</div>
</Paper>
</Page>
)
}
export default SignIn |
эта ошибка возникает один раз, когда я впервые авторизуюсь |
make a reproduction on codesandbox |
Hello @UseMuse if you have solved the problem please guide me through...I also get same error and now no other page in my application opens up due to this error... |
@Tooluloope @naishal @obabichev
https://codesandbox.io/s/react-material-ui-forked-jvl0h |
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in SignIn (at PublicRoute.js:24)
The text was updated successfully, but these errors were encountered: