Невозможно перенаправить на новую страницу при первой отправке формы с помощью history.push ()

Question

Редактировать

Я сделал еще несколько отладок, и вот проблема:

1. CreateProfile.js вызывает profileActions.createProfile () и передает данные для работыи this.props.history, чтобы он мог вставить новый путь в стек истории.

2. profileActions.createProfile () успешно отправляет данные в базу данных.База данных успешно использует данные.

3. profileActions.createProfile () помещает новый путь в стек.Компонент в пути загружается и успешно вызывает редуктор.

4. URL-адрес в браузере не отражает путь, который помещается в стек истории.Новый компонент не загружается.

Это происходит только при создании записи в базе данных.При обновлении записи программа работает должным образом.

---

В настоящее время я пытаюсь перенаправить на новую страницу с помощью response / redux.При первой отправке форма отправляется на сервер и создает запись в базе данных, но не перенаправляет на следующую страницу.На втором представлении, однако, это перенаправляет просто отлично.

Я использую this.props.history.push() для перенаправления.

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

Вот мой компонент (CreateProfile.js)

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { createProfile } from '../../actions/profileActions';
import TextAreaGroup from '../common/TextAreaGroup';
import InputGroup from '../common/InputGroup';

class CreateProfile extends Component {
    // Constructor
    // componentWillRecieveProps()

    onSubmit = (evt) => {
        evt.preventDefault();
        const profileData = {
            handle: this.state.handle,
            bio: this.state.bio,
            website: this.state.website,
            twitter: this.state.twitter,
            instagram: this.state.instagram,
            youtube: this.state.youtube,
            linkedin: this.state.linkedin,
            github: this.state.github,
            vsco: this.state.vsco
        };

        this.props.createProfile(profileData, this.props.history);
    }

    //onChange()

    render() {
        // render logic

        return (
            // markup
                    <form onSubmit={this.onSubmit}>
                        // markup

                        <input 
                            type="submit" 
                            value="Create Profile"
                            className="btn btn-info btn-block mt-4"
                        />

                    </form> 
                </div>
                </div>
                </div>
            </div>
        )
    }
}

CreateProfile.propTypes = {
    createProfile: PropTypes.func.isRequired,
    profile: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    profile: state.profile,
    errors: state.errors
});

export default connect(mapStateToProps, { createProfile })(withRouter(CreateProfile));

Вот мой файл действий, который отправляется в бэкэнд (profileActions.js):

import axios from 'axios';

// import types
import { GET_PROFILE, PROFILE_LOADING, GET_ERRORS, CLEAR_CURRENT_PROFILE } from './types';

// Create Profile
export const createProfile = (profileData, history) => dispatch => {
    axios.post('/api/profile', profileData)
        .then(res => history.push('/login'))
        .catch(err => {
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data
            })
        })
};

}

А вот маршрут в моем бэкэнде, который отправляется:

router.post('/', passport.authenticate('jwt', { session: false }), (req, res) => {
    const { errors, isValid } = validateProfileInputs(req.body);

    if (!isValid) {
        return res.status(400).json(errors);
    } 

    const profileFields = {}; //code setting fields omitted

    Profile.findOne({user: req.user.id}).then(profile => {
        if (profile) {
            // Update Profile
            Profile.findOneAndUpdate(
                { user: req.user.id },
                { $set: profileFields },
                { new: true }
            ).then(profile => res.json(profile)); // SUCCESSFUL PUSH ONTO THIS.PROPS.HISTORY
        } else {
            // Create Profile
            // Check if handle exists
            Profile.findOne({ handle: profileFields.handle })
            .then(profile => {
                if (profile) {
                    errors.handle = 'That handle already exists';
                    res.status(400).json(errors);
                }

                new Profile(profileFields).save().then(profile => res.json(profile)); // PUSH ONTO THIS.PROPS.HISTORY NOT OCCURRING
            });
        }
    });
});

Любойи вся помощь будет принята с благодарностью.Я старался изо всех сил, но не могу понять, в чем проблема.

Answer 1

Эта проблема возникла из-за моего непонимания того, как работает асинхронный JavaScript.

Проблема заключалась в том, что в компоненте было несколько строк кода, которые я тоже пытался вставить.

componentDidMount() {
    this.props.getProfile(); // Async function, sets profile object in store
}

render() {
    const { profile } = this.state.profile;

    if(!Object.keys(profile).length > 0) { // This is always evaluates to true 
                                           // because it executes before
                                           // this.props.getProfile() returns
        this.props.history.push('/create-profile');
    }
}