Skip to content
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

Open
UseMuse opened this issue May 23, 2020 · 7 comments

Comments

@UseMuse
Copy link

UseMuse commented May 23, 2020

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)

import React, { useContext } from 'react'
import ConfigContext from '../../providers/Config/Context'
import { Route, Redirect, useHistory} from 'react-router-dom'

function PublicRoute({ component: Component, redirectTo = '/', ...rest }) {
    const { appConfig } = useContext(ConfigContext)
    const { auth } = appConfig || {}
    const { useAuth } = auth || {}
    const [isAuthorised] = useAuth()
    const history = useHistory()
    let _location = history.location

    if (isAuthorised) {
        if (_location.state && _location.state.from) {
            redirectTo = redirectTo === '/' ? _location.state.from.pathname : redirectTo
        }
    }

    return (
        <Route
            {...rest}
            render={(props) =>
              /* тут ошибка */  !isAuthorised ? (
                    <Component {...props} />
                ) : (
                        <Redirect
                            to={{
                                pathname: redirectTo,
                                search: `from=${props.location.pathname}`,
                                state: { from: props.location },
                            }}
                        />
                    )
            }
        />
    )
}

export default PublicRoute
@UseMuse
Copy link
Author

UseMuse commented May 23, 2020

не знаю как профиксить ошибку, строка с ошибкой помечена комментарием /* тут ошибка */.
Все продолжает работать, но, ошибка красным текстом в консоли не даёт мне покоя.
Нужно наверное что-то сделать на странице SignIn в useEffect.

@UseMuse
Copy link
Author

UseMuse commented May 23, 2020

После того, как я успешно авторизуюсь, меня переводит на домашнюю страницу и тогда я имею эту ошибку в консоли

@UseMuse
Copy link
Author

UseMuse commented May 23, 2020

//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

@UseMuse
Copy link
Author

UseMuse commented May 23, 2020

эта ошибка возникает один раз, когда я впервые авторизуюсь
временно пришлось отказаться от хука useAuth в пользу isLoggedIn()

@Tooluloope
Copy link

make a reproduction on codesandbox

@naishal
Copy link

naishal commented Sep 29, 2020

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...
Thanks in advance.

@UseMuse
Copy link
Author

UseMuse commented Oct 1, 2020

@Tooluloope @naishal @obabichev

make a reproduction on codesandbox

https://codesandbox.io/s/react-material-ui-forked-jvl0h
look at the error in the console

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants