history.push 使用 withRouter 在 action creator 中抛出错误 "Unhandled Rejection (TypeError): history.push is not a function"

Question

在使用 redux-form 的表单组件上处理此处提交时发生错误，当收到操作创建者的成功承诺时，用户不会作为错误重定向到 /contacts Unhandled Rejection (TypeError): history.push is not a function 生成。 I/do 我需要如何将历史状态传递给 ContactForm 组件，以便可以正确重定向用户？我已验证表单已成功提交到 API 并正确存储在数据库中。错误仅出现在 history.push.

ContactForm 组件

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

操作数

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

Answer 1

history 显然会是 undefined，因为无论如何您都没有将值传递给操作。它会自动获得 values，因为 redux-form 的 handleSubmit 将它们传递给您提供的任何函数。为了传递额外的值，您需要重构将函数传递给 handleSubmit.

的方式

您可以定义传递给 handleSubmit 的函数。因此，由于您的操作需要访问表单值和 history，您可以只声明一个添加额外值的中间函数。

onSubmit={this.props.handleSubmit((values) => this.props.addContact(values, this.props.history))}

或者要清理它，您可以像这样将它移出内联：

submit = (values) => {
  this.props.addContact(values, this.props.history);
}

...


onSubmit={this.props.handleSubmit(this.submit)}

history.push 使用 withRouter 在 action creator 中抛出错误 "Unhandled Rejection (TypeError): history.push is not a function"

history.push throwing error "Unhandled Rejection (TypeError): history.push is not a function" in action creator using withRouter

reactjs

react-redux

jsx

redux-form

react-router-dom