Question

编辑

我已经进行了更多的调试，这是问题所在：

CreateProfile.js调用profileActions.createProfile（）并传递要在this.props.history上进行操作的数据，以便它将新路径推入历史记录堆栈。
profileActions.createProfile（）成功将数据发送到数据库。数据库成功使用了数据。
profileActions.createProfile（）将新路径压入堆栈。路径上的组件加载并成功调用了reducer。
浏览器中的URL不能反映推送到历史记录堆栈上的路径。新组件不会加载。

这仅在数据库中创建条目时发生。更新条目时，程序将按预期运行。

我目前正在尝试使用react / 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');
    }
}

在首次提交带有history.push（）

编辑

1 个答案: