javascript - 我的警报仅在我的 React 和 Redux 应用程序的第二次尝试中出现

Question

嗨，我的代码中有一个小错误，我真的不知道如何优化它，基本上我用我的 Redux 操作提交数据，如果我们从后端 API 收到错误，我希望它得到错误弹出up，如果密码或电子邮件不正确，以及是否有可能从我的后端获得相同的 API 响应。

我使用 Redux 和 react，开始这是我正在做的动作：

export const login = (email, password) => async dispatch => {
    const config = {
        headers: {
            'Content-Type': 'application/json'
        }
    };

    const body = JSON.stringify({ email, password });

    try {
        const res = await axios.post(`/users/token/`, body, config);

        dispatch({
            type: LOGIN_SUCCESS,
            payload: res.data
        });

        dispatch(load_user());
    } catch (error) {
        dispatch({
            type: LOGIN_FAIL,
            error: error
        })
    }
}; 

对于我的减速机：

        case LOGIN_SUCCESS:
        case LOGIN_FAIL:
            return {
                ...state,
                error: true,
            }

最后是我的登录页面：

    onSubmit: (value, { setSubmitting }) => {
      if(props.error === false) {
        props.login(
          value.email,
          value.password
          )
      } else {
        setAlertContent("The email or password is incorrect")
        setAlert(props.error)
      }
      setTimeout(() => setSubmitting(false), 3 * 1000)
    },

作为回报，我收到了来自 material-ui 的警报：

        <Box>
        {alert ? <Alert variant="filled" severity='error'>{alertContent}</Alert> : <></> }
        </Box>

并感谢您为优化我的代码提供的帮助和建议。

标签： javascriptreactjsredux