Reactjs history.push抛出错误“；未处理的拒绝（TypeError）：history.push不是一个函数；使用withRouter的实际创建者

在此使用redux表单的表单组件上处理submit here时，当收到action creator上的成功承诺时，用户未重定向到

/contacts

，因为出现错误

未经处理的拒绝（TypeError）：history.push不是生成的函数。我/我需要如何将历史记录状态传递给
ContactForm
组件，以便正确重定向用户？我已验证表单是否已成功提交到API并正确存储在数据库中。该错误仅在历史记录中出现。按

联系人表单组件

import _ from "lodash";
import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";
import { Link } from "react-router-dom";
import ContactField from "./ContactField";
import { connect } from "react-redux";
import formContactFields from "./formContactFields";
import { withRouter } from "react-router-dom";
import * as actions from "../../actions";

class ContactForm extends Component {
    renderFields() {
        return _.map(formContactFields, ({ label, name, value, type }) => {
            return <Field 
                    key={name} 
                    component={ContactField} 
                    label={label} 
                    name={name} 
                    type={type}
                    value={value}
                />
        })
    }

    render() {
        return (
            <div className="form-container">
                <form
                    onSubmit={this.props.handleSubmit(this.props.addContact)}
                >
                    {this.renderFields()}
                    <Link 
                        to="/contacts" 
                        className="btn red darken-1 btn-flat white-text"
                    >
                        <i className="material-icons left">arrow_back</i>
                        <span>Cancel</span>
                    </Link>
                    <button 
                        type="submit"
                        className="btn cyan darken-1 btn-flat white-text right"
                    >
                    <span>Add</span>
                    <i className="material-icons right">add</i>
                </button>
                </form>
            </div>
        );
    }
};

ContactForm = reduxForm({
    form: "newContactForm",
})(ContactForm);

function mapStateToProps(state) {
    return { state };
}

export default connect(mapStateToProps, {actions})(withRouter(ContactForm));

---

历史记录

显然将是

未定义的

，因为您还没有将值传递给操作。它会自动获取

值

，因为

redux表单

的

handleSubmit

会将它们传递给您赋予它的任何函数。为了传递额外的值，您需要重新构造将函数传递到

handleSubmit

的方式

您可以定义传递给

handleSubmit

的函数。因此，由于您的操作需要访问表单值和

历史记录

，因此您只需声明一个添加额外值的中间函数即可

onSubmit={this.props.handleSubmit（（值）=>this.props.addContact（值，this.props.history））}

或者，要清理它，您可以将其移出内联，如下所示：

submit=（值）=>{
this.props.addContact（值，this.props.history）；
}
...
onSubmit={this.props.handleSubmit（this.submit）}

import axios from "axios";
import { FETCH_USER } from "./types";

export const addContact = (values, history) => async dispatch => {
    const res = await axios.post("/api/contacts", values);

    history.push("/contacts"); // THE ERROR IS HAPPENING HERE
    dispatch({ type: FETCH_USER, payload: res.data });
};