Предотвратить реакцию не смонтированного компонента

Question

У меня возникла проблема с производительностью с этим предупреждением:

Предупреждение. Невозможно выполнить обновление состояния React на отключенном компоненте. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount.

Когда я пытаюсь войти в систему, я подключаюсь, но меня не перенаправляют на страницу администратора, я должен повторно ввести учетные данные, чтобы Я могу попасть на страницу администратора. Вот код компонента Login:

export class Login extends Component {
    _isMounted = false

    constructor(props) {
        super(props)
        this.state = {
            email: '',
            password: '',
            redirectToReferrer: false,
        }
    }

    componentDidMount() {
        this._isMounted = true
    }

    login() {
        const email = this.state.email
        const password = this.state.password
        axios.post(`${API_URL}login`, { email, password })
            .then((response) => {
                if (this._isMounted) {
                    this.setState({
                        redirectToReferrer: true
                    })
                    localStorage.setItem("tokens", JSON.stringify(response.data.token))
                    this.setState({
                        redirectToReferrer: true
                    })
                    console.log(localStorage.getItem('tokens'))
                }
                //alert(response.data.admin.email + " est connecté !")
            })
    }

    componentWillUnmount() {
        this._isMounted = false
    }

    render() {
        const { from } = this.props.location.state || { from: { pathname: '/admin' } }
        if (this.state.redirectToReferrer === true) {
            return <Redirect to={from} />
        }
        return (
            <>
                <PanelHeader size="sm" />
                <div className="content">
                    <Row>
                        <Col md="3"></Col>
                        <Col md="6">
                            <Card>
                                <CardHeader>
                                    <h1 className="title"
                                        style={{ textAlign: "center" }}
                                    >Login</h1>
                                </CardHeader>
                                <CardBody>
                                    <Form>
                                        <Row>
                                            <Col md="12">
                                                <FormGroup>
                                                    <h6>Email</h6>
                                                    <Input
                                                        placeholder="Email"
                                                        type="email"
                                                        required
                                                        onChange={(e) => {
                                                            var email = e.target.value
                                                            this.setState({ email: email })
                                                        }}
                                                    />
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col md="12">
                                                <FormGroup>
                                                    <h6>Mot de passe</h6>
                                                    <Input
                                                        placeholder="Mot de passe"
                                                        type="password"
                                                        onChange={(e) => {
                                                            var password = e.target.value
                                                            this.setState({ password: password })
                                                        }}
                                                    />
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col md="12">
                                                <FormGroup style={{ left: "40%" }}>
                                                    <Button outline color="info" size="lg"
                                                        onClick={this.login.bind(this)} className="btn-round">Login</Button>
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                    </Form>
                                </CardBody>
                            </Card>
                        </Col>
                        <Col md="3"></Col>
                    </Row>
                </div>
            </>
        )
    }
}

Я пытался работать с _isMounting, чтобы решить эту проблему, но она не работает!

Answer 1

Мне кажется, что ваша вторая setState может быть причиной этой проблемы:

if (this._isMounted) {
    this.setState({
        redirectToReferrer: true
    })
    localStorage.setItem("tokens", JSON.stringify(response.data.token))
    // try removing this second set state and see if it solves the issue
    // this.setState({
    //    redirectToReferrer: true
    // })
    console.log(localStorage.getItem('tokens'))
}

Похоже, что первая setState вызывает перенаправление и размонтирование, поэтому, когда вторая setState называется компонентом, который уже был размонтирован - отсюда и ошибка.

Также не совсем понятно, зачем вам оба эти setState во-первых, поскольку они оба вносят одно и то же изменение.