Question

这是我的loginform.js，我正在尝试使用状态提交数据。这样登录表单就在loginpage.js中呈现出来在loginPage.js中，将数据提交到redux，然后使用then将页面推送到（“/")。

但是问题是它从不重定向到首页，而是给出了这样的错误

TypeError: Cannot read property 'then' of undefined
LoginPage._this.submit
C:/projects/login/login-react/src/components/pages/LoginPage.js:11
   8 | import './login.css';
   9 | 
  10 | class LoginPage extends React.Component {
> 11 |   submit = data =>
  12 |     this.props.login(data).then(() => this.props.history.push("/"));
  13 | 
  14 |   render() {
View compiled
LoginForm._this.onSubmit
C:/projects/login/login-react/src/components/forms/LoginForm.js:24
  21 | this.setState({errors});
  22 | if(Object.keys(errors).length === 0) {
  23 |   this.setState({loading: true});
> 24 |   this.props
  25 |     .submit(this.state.data)
  26 |     .catch(err =>
  27 |       this.setState({errors: err.response.data.errors, loading: false})
View compiled
▶ 23 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your brow

loginPage.js

class LoginPage extends React.Component {
  submit = data =>
    this.props.login(data).then(() => this.props.history.push("/"));

登录form.js

onSubmit = () => {
        const errors = this.validate(this.state.data);
        this.setState({errors});
        if(Object.keys(errors).length === 0) {
          this.setState({loading: true});
          this.props
            .submit(this.state.data)
            .catch(err =>
              this.setState({errors: err.response.data.errors, loading: false})
            );
        }
      };

这是登录的样子

export const login = credentials => dispatch =>{
  api.user.login(credentials).then(user=> {
    localStorage.loginToken = user.token;
    dispatch(userLoggedIn(user));
  });
}

我想知道还有其他方法可以解决此问题吗？

TypeError：无法读取react react-redux

0 个答案: