我不明白这个反应组件有什么问题

Question

我是react新手，我正在尝试使用mysql和express构建CRUD，现在我正在尝试当用户名已经在数据库中注册时重定向用户，但是当错误409发生时，即使在之后我使用了一个 try-catch 块来处理控制台显示的错误：

"Failed to load resource: the server responded with a status of 409 (Conflict)"

并且导航到登录的行不执行...

这是反应组件：

import React, { useState } from 'react'
import {Link, useNavigate} from 'react-router-dom'
import axios from 'axios'

const Register = () => {

  const [inputs, setInputs] = useState({
    username: '',
    email: '',
    password: ''
  });

  const [err, setError] = useState(null);

  const navigate = useNavigate();

  const handleChange = e => {
    setInputs(prev=>({...prev, [e.target.name]: e.target.value}))
  }

  const handleClick = async (e) => {
    e.preventDefault()  
    try{
      await axios.post('http://localhost:8800/api/auth/register', inputs);
      setTimeout(()=>{
        navigate("/login")
      }, "1500");
    } catch(err){
      setError(err.response.data)   
    }
  }

  return (
    <div className="auth">
      <h1>Register</h1>
      <form>
        <input required type="text" name='username' placeholder='Username' onChange={handleChange}/>
        <input required type="email" name='email' placeholder='Email' onChange={handleChange}/>
        <input required type="password" name='password' placeholder='Password' onChange={handleChange}/>
        <button onClick={handleClick}>Sign up</button>
        {err && <p>{err}</p>}
        <span>Already have an account? <br/><Link to='/login'>login!</Link></span>
      </form>
    </div>
  )
}

export default Register

这是快速控制器：

'import {db} from '../db.js'
import bcrypt from 'bcryptjs'

export const register = (req, res) => {

    //check existing user
    const q = "SELECT * FROM blog.users WHERE email = ? OR username = ?;";
    
    db.query(q, [req.body.email, req.body.username], (err, data) => {
        if (err) return res.json(err)
        if(data.length) return res.status(409).json('user already exists!')

        // hash the password and create a user
        bcrypt.genSalt(10, (err, salt)=>{
            if(err){
                console.log(err)
                return res.status(500).json('error saving data');
            } 
            bcrypt.hash(req.body.password, salt, (err, hash) => {
                if(err){
                    console.log(err)
                    return res.status(500).json('error saving data');
                } 
                const password = hash;
                const q = "INSERT INTO blog.users(`username`, `email`, `password`) VALUES (?)";
                const values = [req.body.username, req.body.email, password]

                db.query(q, [values], (err, data) => {
                    if(err){
                    console.log(err)
                    return res.status(500).json('error saving data');
                } 
                    return res.status(200).json('User has been created');
                })
            })
        })


    })

}

export const login = (req, res) => {
    
}

export const logout = (req, res) => {
    
}

我尝试了一切，所以如果有人可以帮助我，我将不胜感激。

Answer 1

所有网络错误都会记录到控制台，这是浏览器执行此操作，而不是您的代码。

您可以捕获错误并重定向到那里，而不是在“快乐路径”中。

示例：

const handleClick = async (e) => {
  e.preventDefault();

  try {
    await axios.post('http://localhost:8800/api/auth/register', inputs);
  } catch(err) {
    // already registered, redirect to login
    if (err.response.status === 409) {
      navigate("/login", { replace: true });
      return;
    }

    // Set error state with message
    setError(err.response.data);
  }
};