Reactjs 在组件重新加载后，无法使用useState挂钩更新varaibale

我想在用户成功登录或发生错误时显示一个snackBar。 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 prop始终设置为false，但connect HOC重新关联组件后，变量会更新。我没有发现我的错误是什么？

useState的参数仅在初始更新时使用一次，如果要在更新变体道具时执行状态更新，可以使用useEffect挂钩

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>
    )
}

您永远不会通过编写=>handleClose来调用handleClose。试试=>handleClose。看起来你可能想通过这次活动，这也是一个原因。e=>HandleClose“某物”