Question

我正在创建一个React-Redux应用程序，使用通过express.js构建的API。

我有一个登录表单，当用户尝试使用错误的凭据登录时，我想向用户显示一条消息。我试图以多种方式设计这种行为。在这里，我有一种非常合乎逻辑且完全同步的方式。

我已经设置了一个Login组件，从props的userActions中调用了一个函数。这些组件与export default connect(null, { login, register })(Login);连接。

让我们现在来看一下登录。我将代码保留在那里，因为我不知道是否/如何影响我的登录功能。我的问题是，我可以按预期创建通知，并且登录和验证可以按预期进行，但是我无法获得“身份验证”状态，这对于确定重定向是必不可少的。

我必须处理两种情况：

登录成功=>重定向到显示欢迎消息的“ /”；
登录失败=>在同一页面上显示一条错误消息。

我可以创建通知，并且登录和验证可以按预期进行，但是我无法获得“ auth”状态，这对于确定重定向是必不可少的。

有人可以帮我吗？谢谢！

onSubmit方法@ login.js：

onSubmit = async e => {
    e.preventDefault();

    const { name, email, password } = this.state;

    // Check For Errors
    {....}

    // Register or login and notify user
    let auth = false;
    if (this.state.register) {
      this.props.register({ name, email, password })
        .then((res) => { auth = res.success; console.log(`register then: ${res}`); })
    } else {
      this.props.login({ email: email, password: password })
        .then((res) => { auth = res.success; console.log(`login then: ${res}`); })
    }

    if (auth) { this.props.history.push('/') }
  }

登录方法@ userActions.js：

export const login = authData => async dispatch => {

  axios.post('/api/v1/users/login', authData)
    .then(res => {
      beginSession(res);

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

      notifyUser('login', dispatch, res);

      return { success: true }
    })
    .catch(err => {
      return { success: false }
    });

};

Answer 1

以下是在API调用响应之前加载的组件 您在渲染休止前检查



//create a  use state variable for validation return a response  

constructor(props) {
    super(props);
    this.state = {
    login:'' }
   };

// any method here
onSubmit = async e => {
    e.preventDefault();
}
/* api call*/
{
this.setState({
                login: json.error.message
              });
// other code
}

render() {  

    if (!this.state.user ) {
      return null;
    }


    return (
      <>
//componest wait still not get repose 

<p>{this.state.login} <p>
<>
}

....

Answer 2

我设法使用componentDidUpdate来检查state.user来创建想要的体验，该状态将从登录名中更新。

componentDidUpdate = () => {
    if (Object.keys(this.props.user).length !== 0) { this.props.history.push('/') }
  }

...

const mapStateToProps = state => ({
  user: state.user
})

export default connect(mapStateToProps, { login, register })(Login);

React组件和调度动作的异步问题

2 个答案: