Question

我正在使用redux将nodejs后端与reactjs连接起来。但是每次我提交登录表单时，都会出现类似这样的错误。

TypeError：无法读取未定义的属性'then'

，我不知道这是哪里来的。我试图在StackOverflow上找到它，但确实找到了一些东西，说我需要将其转换为函数，但仍然遇到相同的错误。

这是我的代码

loginPage.js

class LoginPage extends Component {
    submit = (data) => this.props.login(data).then(() => this.props.history.push('/'));
    render() {
        return (
            <div>
                <h1>LoginPage</h1>
                <LoginForm submit={this.submit}/>
            </div>
        );
    }
}

loginform.js

onSubmit = (e) => {
        e.preventDefault();
        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 }));

        }
    };

api.js

import axios from 'axios';
export default {
    user: {
        login: (credentials) => 
            axios.post('/api/auth', { credentials })
                .then(res => res.data.user),
    }
}

actions / auth.js

import { USER_LOGGED_IN } from '../types';
import api from '../api';

export const userLoggedIn = (user) => ({
    type: USER_LOGGED_IN,
    user
})



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

后端/路由/auth.js

import express from 'express';
import User from '../Models/User';
const router = express.Router();

router.post('/', (req, res) => {
    const { credentails } = req.body;
    User.findOne({email: req.body.email}).then(user => {
        if (user.email) {
            res.json({success: true})
        } else {
            res.status(400).json({errors: {global: "Invalid Credentials"}})
        }
    })

})

loginForm.js

import React, {Component} from 'react';
import LoginForm from '../Forms/LoginForm';
import PropTypes from 'prop-types'
import { connect } from 'react-redux';
import { login } from '../../actions/auth';
class LoginPage extends Component {
    submit = (data) => this.props.login(data).then(() => this.props.history.push('/'));
    render() {
        return (
            <div>
                <h1>LoginPage</h1>
                <LoginForm submit={this.submit}/>
            </div>
        );
    }
}

LoginPage.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }).isRequired,
  login: PropTypes.func.isRequired
};

export default connect(null, {login})(LoginPage);

Answer 1

您尚未为登录功能指定任何Promise。因此，您遇到undefined错误。

您也可以通过以下两种方式执行此操作：

1。承诺

api.user.login(credentials)
         .then(user => {
               dispatch(userLoggedIn(user))
             });

Api.js

import axios from 'axios';
    export default {
        user: {
            login: new Promise(credentials, resolve, reject) => 
                axios.post('/api/auth', { credentials })
                    .then(res => resolve(res.data.user))),
        }
    }

2。回调函数。

actions / auth.js

api.user.login(credentials,
                 (user => {
                    dispatch(userLoggedIn(user))
                 })
              );

Api.js

import axios from 'axios';
export default {
    user: {
        login: (credentials, callback) => 
            axios.post('/api/auth', { credentials })
                .then(res => callback(res.data.user)),
    }
}

TypeError：无法读取reactjs中未定义的属性'then'

1 个答案: