ReactJS中如何根据接口响应显示注册结果提示弹窗？

解决注册成功/失败弹窗始终显示的问题 #

核心是用React状态控制弹窗的显示与隐藏，根据接口请求的成功或失败结果动态渲染对应提示，无需跳转页面。以下是具体修改方案：

步骤1：添加状态管理 #

导入useState并新增状态变量，用来记录注册结果：

import { useState } from 'react'; // 别忘了导入useState

function Register(props) {
    const navigate = useNavigate();
    // 状态说明：null=不显示弹窗，'success'=显示成功提示，'error'=显示失败提示
    const [registerStatus, setRegisterStatus] = useState(null);
    
    // ... 原有的input状态逻辑保持不变

步骤2：调整提交处理逻辑 #

把表单验证移到请求发起前，避免无效请求；根据接口响应结果更新注册状态：

const submitHandler = async event => {
    event.preventDefault();

    // 先验证表单有效性，无效直接终止流程
    if (!formIsValid) return;

    const registerInput = {
        username: usernameValue,
        email: emailValue,
        password: passwordValue
    };

    try {
        await axios.post("/api/auth/register", registerInput);
        // 请求成功：设置成功状态，重置表单（如需跳转可取消navigate注释）
        setRegisterStatus('success');
        resetEmail();
        resetUsername();
        resetPassword();
        // navigate('/'); // 如需跳转首页请取消注释
    } catch (error) {
        console.log(error.response?.data);
        // 请求失败：设置错误状态
        setRegisterStatus('error');
    }
};

步骤3：条件渲染弹窗并添加关闭功能 #

移除始终显示的Alert组件，改为根据registerStatus的值动态渲染对应弹窗，同时添加关闭按钮：

return (
    <div className='centered'>
        <form onSubmit={submitHandler} className='register-box'>
            {/* ... 原有的表单内容保持不变 */}

            <Button disabled={!formIsValid} variant="primary" type='submit'>
                Create New Account
            </Button>

            <br/><br/>

            {/* 成功提示弹窗 */}
            {registerStatus === 'success' && (
                <Alert variant="success" onClose={() => setRegisterStatus(null)} dismissible>
                    Account creation was successful.
                </Alert>
            )}
            
            {/* 失败提示弹窗 */}
            {registerStatus === 'error' && (
                <Alert variant="danger" onClose={() => setRegisterStatus(null)} dismissible>
                    Account creation has failed.
                </Alert>
            )}
        </form>
    </div>
);

额外修复：移除无效点击事件 #

原代码中Button的onClick={alertClicked}是未定义函数，直接删除即可，表单提交由form的onSubmit事件处理。

完整修改后的代码 #

import { useState, useNavigate } from 'react';
import axios from 'axios';
import Button from 'react-bootstrap/Button';
import Alert from 'react-bootstrap/Alert';
import useInput from './useInput'; // 路径根据实际项目调整

const isNotEmpty = (value) => value.trim() !== '';
const isEmail = (value) => value.includes('@');

function Register(props) {
    const navigate = useNavigate();
    const [registerStatus, setRegisterStatus] = useState(null);

    // username input
    const {
        value: usernameValue,
        isValid: usernameIsValid,
        hasError: usernameHasError,
        valueChangeHandler: usernameChangeHandler,
        inputBlurHandler: usernameBlurHandler,
        reset: resetUsername
    } = useInput(isNotEmpty);

    // password input
    const {
        value: passwordValue,
        isValid: passwordIsValid,
        hasError: passwordHasError,
        valueChangeHandler: passwordChangeHandler,
        inputBlurHandler: passwordBlurHandler,
        reset: resetPassword
    } = useInput(isNotEmpty);

    // email input
    const {
        value: emailValue,
        isValid: emailIsValid,
        hasError: emailHasError,
        valueChangeHandler: emailChangeHandler,
        inputBlurHandler: emailBlurHandler,
        reset: resetEmail
    } = useInput(isEmail);

    let formIsValid = false;
    if (usernameIsValid && emailIsValid && passwordIsValid) {
        formIsValid = true;
    }

    const submitHandler = async event => {
        event.preventDefault();

        if (!formIsValid) return;

        const registerInput = {
            username: usernameValue,
            email: emailValue,
            password: passwordValue
        };

        try {
            await axios.post("/api/auth/register", registerInput);
            setRegisterStatus('success');
            resetEmail();
            resetUsername();
            resetPassword();
            // navigate('/'); // 如需跳转首页请取消注释
        } catch (error) {
            console.log(error.response?.data);
            setRegisterStatus('error');
        }
    };

    const emailClasses = emailHasError ? 'form-control invalid' : 'form-control';
    const usernameClasses = usernameHasError ? 'form-control invalid' : 'form-control';
    const passwordClasses = passwordHasError ? 'form-control invalid' : 'form-control';

    return (
        <div className='centered'>
            <form onSubmit={submitHandler} className='register-box'>
                <h3 className="register-title">Create New Account</h3>
                <div className='control-group'>
                    <div className={emailClasses}>
                        <input required
                            type="email"
                            name="email"
                            value={emailValue}
                            placeholder='Email'
                            onChange={emailChangeHandler}
                            onBlur={emailBlurHandler}
                        />
                        {emailHasError && <p className="error-text">Please provide a valid Email</p>}
                    </div>
                    <div className={usernameClasses}>
                        <input required
                            type="text"
                            name="username"
                            value={usernameValue}
                            placeholder='Login ID'
                            onChange={usernameChangeHandler}
                            onBlur={usernameBlurHandler}
                        />
                        {usernameHasError && <p className="error-text">Please enter your future Login ID</p>}
                    </div>
                    <div className={passwordClasses}>
                        <input required
                            type="password"
                            name="password"
                            value={passwordValue}
                            placeholder='Password'
                            onChange={passwordChangeHandler}
                            onBlur={passwordBlurHandler}
                        />
                        {passwordHasError && <p className="error-text">Please enter your future Password</p>}
                    </div>
                </div>

                <Button disabled={!formIsValid} variant="primary" type='submit'>
                    Create New Account
                </Button>

                <br/><br/>

                {registerStatus === 'success' && (
                    <Alert variant="success" onClose={() => setRegisterStatus(null)} dismissible>
                        Account creation was successful.
                    </Alert>
                )}

                {registerStatus === 'error' && (
                    <Alert variant="danger" onClose={() => setRegisterStatus(null)} dismissible>
                        Account creation has failed.
                    </Alert>
                )}

            </form>
        </div>
    );
}

export default Register;

内容的提问来源于stack exchange，提问作者enimox