Невозможно обновить varaibale с помощью ловушки useState после перерисовки компонента - PullRequest
0 голосов
/ 20 марта 2019

Я хочу отображать снэк-бар всякий раз, когда пользователь входит в систему успешно или что-то не так. MyComponent.jsx:

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import SnackBar from '../../components/SnackBar';
import SignInForm from './SignInForm';

const SingInContainer = ({ message, variant}) => {
    const [open, setSnackBarState] = useState(!!variant);

    const handleClose = () => {
        setSnackBarState(false)

      };

    return (
        <div>
        <SnackBar
            open={open}
            handleClose={handleClose}
            variant={variant}
            message={message}
            />
        <SignInForm/>
        </div>
    )
}

SingInContainer.propTypes = {
    variant: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired
}

const mapStateToProps = (state) => {
    const {variant, message } = state.snackBar;

    return {
        variant,
        message
    }
}

export default connect(mapStateToProps)(SingInContainer);

Параметр open всегда имеет значение false, однако variant обновляется после повторного отображения компонента connect HOC. Я не нашел в чем моя ошибка?

1 Ответ

1 голос
/ 20 марта 2019

Параметр useState используется только один раз при первоначальном обновлении, если вы хотите выполнить обновление, чтобы указать, когда обновляется вариант prop, вы можете использовать useEffect hook

const SingInContainer = ({ message, variant}) => {
    const [open, setSnackBarState] = useState(!!variant);
    useEffect(() => {
       setSnackBarState(!!variant);
    }, [variant])
    const handleClose = () => {
        setSnackBarState(false)

      };

    return (
        <div>
        <SnackBar
            open={open}
            handleClose={handleClose}
            variant={variant}
            message={message}
            />
        <SignInForm/>
        </div>
    )
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...