首页 > 解决方案 > Redux 表单状态未定义

问题描述

我正在使用 react-redux 从另一个组件访问表单的状态。这就是我导出表单的方式:

import _ from 'lodash';
import { reduxForm, Field } from 'redux-form';
import formFields from './formFields';
import OrderField from './OrderField';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class OrderForm extends Component {
    constructor(props) {
        super(props);
        this.renderFields = this.renderFields.bind(this);
    }


    renderFields() {
        return _.map(formFields, ({ label, name }) => {
            return (
                    <Field
                key={name}
                component={OrderField}
                type="text"
                label={label}
                name={name}
                    />
            );
        });
    }


    render() {

        return (
            <div>
            <form onSubmit={this.props.handleSubmit(this.props.onOrderSubmit)}>
                {this.renderFields()}
                <button type="submit" className="waves-effect waves-light btn-large red darken-2 white-text">
                Submit Order
                <i className="material-icons right">done</i>
                </button>
                <p>Pay cash on delivery</p>
            </form>
                </div>
        );
    }
}

export default reduxForm({
    form: 'orderForm'
})(OrderForm);

也是一个容器形式:

import OrderForm from './OrderForm';
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
class OrderNew extends Component {

    constructor(props) {
        super(props);
        this.submitOrder = this.submitOrder.bind(this);
    }

    submitOrder(values) {
        console.log("handle submit order");
    }

    render() {
        return (
            <OrderForm
            onOrderSubmit={ this.submitOrder }/>
        );
    }
}

export default reduxForm({
    form: 'orderForm'
})(OrderNew);


我正在尝试在另一个组件中访问 state.form.orderForm.values 属性:

function mapStateToProps(state) {
    console.log(state);
    return {
        cart_items: state.order.cart_items,
        products: state.order.products,
        total: state.order.total,
        formValues: state.form.orderForm.values
    };
}

但我得到 state.form.orderForm.values 未定义的错误。我究竟做错了什么?

实际上,console.log(state.form)mapStateToProps.

标签: javascriptreactjs

解决方案


推荐阅读