时间戳

首页 > 解决方案 > Reactjs - 如何根据成功的 axios POST 创建布尔值？

javascript - Reactjs - 如何根据成功的 axios POST 创建布尔值？

问题描述

我有一个调度，用于确认用户是否已登录。现在，它当前根据登录字段中的任何输入发送数据。这意味着，您可以输入错误的用户名和密码，并且该调度将充当一切，就好像凭据是正确的一样。

一旦用户成功输入了正确的用户名和密码，我只想使用我的调度。这是我的代码！

export default function SignIn() {
    const history = useHistory();
    const initialFormData = Object.freeze({
        email: '',
        password: '',
    });

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

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

    const dispatch = useDispatch();

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

        axiosInstance
            .post(`auth/token/`, {
                grant_type: 'password',
                username: formData.email,
                password: formData.password,

            })
            .then((res) => {
                console.log(res);
                localStorage.setItem('access_token', res.data.access_token);
                localStorage.setItem('refresh_token', res.data.refresh_token);
                history.push('/');
                window.location.reload();
            });

        dispatch(login({
            name: formData.email,
            password: formData.password,
            loggedIn: true,
        }))
    };

下面是问题的重点，我只想在用户成功登录的情况下触发我的调度。目前，任何文本字段输入都会触发调度。

        dispatch(login({
            name: formData.email,
            password: formData.password,
            loggedIn: true,

我在想一个为成功的 POST HTTP 200 请求提供真假的布尔值？如果有更简单的方法，那么我想知道:)

标签： javascriptreactjsaxios

解决方案

将您的调度放在 then 块中并添加一个 catch 方法来处理错误

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

    axiosInstance
        .post(`auth/token/`, {
            grant_type: 'password',
            username: formData.email,
            password: formData.password,

        })
        .then((res) => {
            console.log(res);
            localStorage.setItem('access_token', res.data.access_token);
            localStorage.setItem('refresh_token', res.data.refresh_token);
            history.push('/');
            window.location.reload();
            dispatch(login({
             name: formData.email,
             password: formData.password,
             loggedIn: true,
           }))
        })
        .catch(err => {
           // HANDLE ERROR HERE
        }
};

推荐阅读