Блог

Я подключаю серверную часть nodejs к reactjs с помощью redux. Но каждый раз, когда я отправляю форму входа, я получаю сообщение об ошибке примерно такого рода.

Ошибка типа: не удается прочитать свойство ‘then’ неопределенного

и я понятия не имею, откуда это берется. Я пытался найти это в StackOverflow, я нашел кое-что, в котором говорилось, что мне нужно преобразовать then как функцию, но все равно я получаю ту же ошибку.

Это мой код

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))
        });
}
  

backend/routes/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);
  

Вы не указали никаких обещаний для функции входа в систему. Таким образом, вы получаете 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)),
    }
}