React中useEffect搭配navigate跳转失效问题求助

你的代码里有几个关键问题导致跳转逻辑失效，逐个拆解：

1. 违反React Hook规则 #

你把useEffect定义在了FormSubmit这个异步函数内部，React要求所有Hook必须在组件的顶层作用域调用，不能嵌套在普通函数、条件判断或者循环里。这种写法会让React无法正确追踪Hook的调用顺序，直接导致这个useEffect根本不会执行。

2. 混淆了Response对象和解析后的JSON数据 #

fetch返回的fetchUserCreate是Response对象，它才有ok属性（判断HTTP状态码是否在200-299区间）；而jsonData是你解析后的响应体内容，它本身没有ok属性。你应该先判断Response的状态，再处理JSON数据。

3. 无效的jsonData.catch #

await fetchUserCreate.json()已经把Promise解析成了实际数据，不是Promise对象，所以.catch()调用完全无效，错误处理应该放在try/catch里或者在fetch阶段处理。

4. 冗余的DOM操作与事件监听 #

• 用getElementById获取表单值不符合React的数据流模式，应该用useState管理表单状态。
• 你已经在button的onClick里绑定了FormSubmit，没必要再给button添加额外的click事件监听来阻止默认行为，直接在函数里调用event.preventDefault()即可。

修复后的完整代码 #

const SignupPage = () => {
    const navigate = useNavigate();
    // 用useState管理表单状态，替代DOM查询
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState(null);

    function getErrorMessage() {
        return 'something went wrong';
    }

    async function handleFormSubmit(event) {
        // 直接在这里阻止默认提交行为
        event.preventDefault();
        setError(null); // 清空之前的错误

        try {
            const options = {
                method: 'POST',
                headers: {
                    'Accept': 'application/json, text/plain, */*',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ email, password })
            };

            const response = await fetch('http://localhost:5000/Signup', options);

            // 先判断HTTP响应状态是否正常
            if (!response.ok) {
                // 如果状态码异常，抛出错误进入catch
                throw new Error('Request failed');
            }

            const jsonData = await response.json();
            // 这里可以根据jsonData的业务逻辑判断是否跳转，比如后端返回success: true之类的
            // 假设后端返回的jsonData里有ok字段，或者直接用response.ok的判断结果
            navigate('/');

        } catch (error) {
            const errMsg = getErrorMessage();
            setError(errMsg);
        }
    }

    return ( 
        <div className="container">
            <div className="black"></div>
            <video src={SnowVid} type="video/mp4" autoPlay muted loop id='video1'></video>
            <div id="login-container">
                <h2 className="title-galixy">I0I</h2>
                <div id="Signup">
                    <b><h2 className="title-card">Signup</h2></b>
                    <i><h3 className="email">Email</h3></i>
                    <div className="input">
                        {/* 用onChange绑定状态更新 */}
                        <input 
                            name='email' 
                            id='email' 
                            type="text" 
                            className="inputs" 
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                        />
                    </div>
                    
                    <i><h3 className="Password">Password</h3></i>
                    <div className="input">
                        <input 
                            name='Password' 
                            id='password' 
                            type="password" // 密码应该用type="password"，不是text
                            className="inputs" 
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    <div className="error">{error}</div>

                    {/* 直接绑定handleFormSubmit，不需要额外的箭头函数包裹 */}
                    <div className="button">
                        <button onClick={handleFormSubmit} className='LastButton' id='button'>
                            <b>Signup</b> {/* 按钮文字是Signup，不是Login，这里也修正了 */}
                        </button>
                    </div>
                </div>
            </div>
        </div>
     );
}

额外优化点说明 #

• 把密码输入框的type改成了password，符合表单规范。
• 按钮文字从Login改成了Signup，和页面标题一致，避免混淆。
• 用useState管理表单状态，完全遵循React的单向数据流，避免直接操作DOM。
• 移除了无用的errorDiv ref，因为错误状态已经用useState管理，直接渲染即可。

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