如何在 Reactjs 中登录失败时显示错误消息

Question

如何在Reactjs 中登录失败时显示错误消息。我想在用户登录失败时在页面上显示警告信息'Invalid Username or Password, Please try again.'。我如何在 Reactjs 中做到这一点？

代码：

    login.js
export default function LogIn() {
    let history = useHistory();
    const initialFormData = Object.freeze({
        username: '',
        password: '',
    });

const [formData, updateFormData] = useState(initialFormData);

const handleChange = (e) => {
    updateFormData({
        ...formData,
        [e.target.name]: e.target.value.trim(),
    });
};

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);

    axiosInstance
        .post(`token/`, {
            username: formData.username,
            password: formData.password,
        })
        .then((res) => {
            localStorage.setItem('access_token', res.data.access);
            localStorage.setItem('refresh_token', res.data.refresh);
            axiosInstance.defaults.headers['Authorization'] =
                'JWT ' + localStorage.getItem('access_token');
                history.push("/home");
            
        });
};
return (
    <Box component="form" onSubmit={handleSubmit} noValidate>
      <TextField
           margin="normal"
           required
           id="username"
           label="username"
           name="username"
           autoComplete="username"
           autoFocus
           onChange={handleChange}/>

      <TextField
        margin="normal"
        required
        name="password"
        label="password"
        type="password"
        id="password"
        autoComplete="current-password"
        onChange={handleChange}/>
                        
         <Button type="submit" onClick={handleSubmit}>
                 LOG IN
          </Button>            
          </Box>    
);}

提前致谢。

Answer 1

您可以在 javascript 中使用警报来显示对话框，您也可以使用此 Pakage

向用户显示警报或消息

you can use this code to set error in state and show in label

const [error,setError]=useState();
const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);

    axiosInstance
        .post(`token/`, {
            username: formData.username,
            password: formData.password,
        })
        .then((res) => {
            localStorage.setItem('access_token', res.data.access);
            localStorage.setItem('refresh_token', res.data.refresh);
            axiosInstance.defaults.headers['Authorization'] =
                'JWT ' + localStorage.getItem('access_token');
                history.push("/home");
            
        }, reason => {
  console.error(reason); // Error!
setError('Invalid Username or Password')
});
};

return (
    <Box component="form" onSubmit={handleSubmit} noValidate>
      <TextField
           margin="normal"
           required
           id="username"
           label="username"
           name="username"
           autoComplete="username"
           autoFocus
           onChange={handleChange}/>

      <TextField
        margin="normal"
        required
        name="password"
        label="password"
        type="password"
        id="password"
        autoComplete="current-password"
        onChange={handleChange}/>
                        
         <Button type="submit" onClick={handleSubmit}>
                 LOG IN
          </Button>  
         {error?<Label>{error}</Label>:null}          
          </Box>    
);

如何在 Reactjs 中登录失败时显示错误消息

How to display an Error message when logging in fails in Reactjs

authentication

validation

reactjs

react-router

react-hooks