switch语句始终返回react js中的最后一种情况

Question

我尝试在react js中创建一个密码强度检查器。我使用一个开关盒来突出显示消息。但是在switch语句中始终执行最后一条语句（而不是默认语句）。我是React JS的新手，并且使用了实质性的UI框架。

这是主要功能。

const passwordStrengthChecker = (password) => {
        const regExArray = ['(?=.*?[A-Z])', '(?=.*?[a-z])', '(?=.*?[0-9])', '(?=.*?[#?!@$%^&*-])', '.{8,}'];
        const strengthMsgs = [
            'Password must have at lease one upper case',
            'Password must have at lease one lower case',
            'Password must have at lease one number',
            'Password must have at lease one special character',
            'Password must have 8 characters',
        ];
        const uiInfoArray = regExArray.map((regExString, index) => {
            const check = new RegExp(regExString);
            return {
                error: !check.test(password),
                message: strengthMsgs[index],
                index: strengthMsgs.indexOf(strengthMsgs[index]),
            };
        });
        const isThereAnyErrors = uiInfoArray.findIndex((obj) => obj.error);
        if (isThereAnyErrors >= 0) {
            setHideValidationText(false);
            uiInfoArray.map((obj) => {
                switch (obj.message) {
                    case 'Password must have at lease one upper case':
                        setPasswordStrengthText({ ...passwordStrengthText, uppercase: !obj.error });
                        break;
                    case 'Password must have at lease one lower case':
                        setPasswordStrengthText({ ...passwordStrengthText, lowerCase: !obj.error });
                        break;
                    case 'Password must have at lease one number':
                        setPasswordStrengthText({ ...passwordStrengthText, number: !obj.error });
                        break;
                    case 'Password must have at lease one special character':
                        setPasswordStrengthText({ ...passwordStrengthText, specialCharacter: !obj.error });
                        break;
                    case 'Password must have 8 characters':
                        setPasswordStrengthText({ ...passwordStrengthText, characters: !obj.error });
                        break;
                    default:
                }
                return obj;
            });
        } else {
            setHideValidationText(true);
        }
    }; 

这是我的状态，

    const [values, setNewPassword] = useState({ password: '', showPassword: false });
    const [validationText, setValidationText] = useState(false);
    const [passwordStrengthText, setPasswordStrengthText] = useState({
        uppercase: false,
        lowerCase: false,
        number: false,
        specialCharacter: false,
        characters: false,
    });
    const [hideValidationText, setHideValidationText] = useState(false);

这是我显示错误消息的方式。

<Input
                            id="password"
                            InputProps={{
                                classes: {
                                    underline: classes.textFieldUnderline,
                                    input: classes.textField,
                                },
                            }}
                            value={values.password}
                            onChange={passwordOnChnage('password')}
                            margin="normal"
                            placeholder="New Password"
                            type={values.showPassword ? 'text' : 'password'}
                            fullWidth
                            endAdornment={
                                <InputAdornment position="end">
                                    <IconButton
                                        aria-label="toggle password visibility"
                                        onMouseDown={handleMouseDownPassword}
                                        onMouseUp={handleMouseUpPassword}
                                    >
                                        {values.showPassword ? <Visibility /> : <VisibilityOff />}
                                    </IconButton>
                                </InputAdornment>
                            }
                        />
                        <Collapse in={validationText}>
                            <Typography
                                className={
                                    passwordStrengthText.uppercase ? classes.passwordVerify : classes.passwordUnVerify
                                }
                            >
                                Password must have at lease one upper case
                            </Typography>
                            <Typography
                                className={
                                    passwordStrengthText.lowerCase ? classes.passwordVerify : classes.passwordUnVerify
                                }
                            >
                                Password must have at lease one lower case
                            </Typography>
                            <Typography
                                className={
                                    passwordStrengthText.number ? classes.passwordVerify : classes.passwordUnVerify
                                }
                            >
                                Password must have at lease one number
                            </Typography>
                            <Typography
                                className={
                                    passwordStrengthText.specialCharacter
                                        ? classes.passwordVerify
                                        : classes.passwordUnVerify
                                }
                            >
                                Password must have at lease one special character
                            </Typography>
                            <Typography
                                className={
                                    passwordStrengthText.characters ? classes.passwordVerify : classes.passwordUnVerify
                                }
                            >
                                Password must have 8 characters
                            </Typography>
                        </Collapse>

onChange函数

const passwordOnChnage = (prop) => (event) => {
        setNewPassword({ ...values, password: event.target.value });
        passwordStrengthChecker(event.target.value);
        setValidationText(true);
        if (event.target.value === '') {
            setValidationText(false);
            setHideValidationText(false);
        } else if (hideValidationText) {
            setValidationText(false);
        }
    };