Reactjs 分派不是一个函数 客观的

设置由用户使用react redux控制的动态表单，并对我的表单运行验证检查

问题: 因为我的表单是动态的，所以我需要进行动态验证。为了做到这一点，我的表单数据需要作为道具传递给我的组件，它可以用作来自revalidate的validate函数中的第二个参数

我的方法 要做到这一点，我需要等待组件安装完成，构建表单，将其传递给redux，然后将状态映射到道具。当用户添加更多行时，我将更新状态，然后组件将渲染。我将使用shouldComponentUpdate（）来避免任何渲染循环

错误 我的错误是关于调度的。当我尝试运行分派（将表单传递到redux）时，我得到

分派不是一个函数

错误

我对

connect（）

不太满意，因为我必须用它和firebase包装redux。这种语法真让我困惑

问题: 我相信我如何导出我正在使用的组件的问题，比如Firebase、Redux和Connect。在路上的某个地方，我失去了连接的空间。有人能解释我做错了什么吗

组成部分

import React，{Component}来自“React”；
从“redux表单”导入{reduxForm，Field}；
从“react bootstrap”导入{Container，Form，Col，Button}；
从“../../material icon/MaterialIcon”导入MaterialIcon；
从“react-redux firebase”导入{withFirestore}；
从“react redux”导入{connect}；
从“../../forms/TextInput”导入TextInput；
从“重新验证”导入{combinevalidator，isRequired}；
从“../../../store/actions/students”导入{setupStudentForm}；
const validate=（值，ownprops）=>{
//一旦表单通过mapStateToProps使用道具导入，将传入验证规则。
}
导出类CreateStudentsForm扩展组件{
//使用constrcutor使componentDidMount（）可以呈现（）无法访问变量
建造师（道具）{
超级（道具）；
此.state={
行：2，
}
this.formArray=[]；
this.form=null；
}
componentDidMount（）{
//渲染组件后，设置表单并发送到redux
for（设i=1；i！==this.state.rows+1；i++）{
让firstNameField={
字段名：`firstName${i}`，
标签：“名字”，
要求：正确，
键入：“文本”，
}
让lastNameField={
字段名：`lastName${i}`，
标签：“姓氏”，
要求：正确，
键入：“文本”，
}
this.formArray.push（[firstNameField，lastNameField]）；
}
this.props.setupStudentFormHandler（this.formArray）；
}
//确保我们不会陷入渲染循环中
shouldComponentUpdate（下一步，下一步状态）{
if（nextrops！==this.props）{
返回真值
}否则{
返回错误
}
}
render（）{
//允许用户添加另一行
常量addRow=（）=>{
这是我的国家({
行：this.state.rows+1
})
}
//映射表单数组并创建模板
如果（本表格）{
让form=this.formArray.map（（字段，索引）=>{
返回(
)
})
}
返回(
{this.form}
添加另一个学生
)
}
}
常量mapStateToProps=状态=>{
返回{
//访问将具有表单的学生状态
学生形式：state.students
};
};
const mapDispatchToProps=调度=>{
返回{
//将formArray发送到redux
setupStudentFormHandler:（表单）=>调度（setupStudentForm（表单））
};
};
使用FireStore导出默认值(
红肿({
表格：“创建学生”，验证
})（连接(
mapDispatchToProps，
mapStateToProps
)（CreateStudentsForm）
)
);
mapStateToProps
是的第一个参数，
mapDispatchToProps
是第二个参数。尝试交换订单：

连接(
MapStateTops，
mapDispatchToProps
)（CreateStudentsForm）

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";
import { Container, Form, Col, Button } from "react-bootstrap";
import MaterialIcon from '../../material-icon/materialIcon';
import { withFirestore } from "react-redux-firebase";
import { connect } from "react-redux";
import TextInput from "../../forms/textInput";
import { combineValidators, isRequired } from "revalidate";
import { setupStudentForm } from '../../../store/actions/students';


const validate = (values, ownprops) => {
    // Will be passing in validation rules, once form is apssed in with props via mapStateToProps.
}

export class CreateStudentsForm extends Component {
    // Using constrcutor so componentDidMount() can render() cann access variables
    constructor(props) {
        super(props);
        this.state = {
            rows: 2,
        }
        this.formArray = [];
        this.form = null;
    }

    componentDidMount() {
        // Once component is rendered, setup form and send to redux
        for (let i = 1; i !== this.state.rows + 1; i++) {
            let firstNameField = {
                fieldName: `firstName${i}`,
                label: 'First Name',
                required: true,
                type: "text",
            }
            let lastNameField = {
                fieldName: `lastName${i}`,
                label: 'Last Name',
                required: true,
                type: "text",
            }
            this.formArray.push([firstNameField, lastNameField]);
        }
        this.props.setupStudentFormHandler(this.formArray);
    }

    // Ensure we do not get stuck in render loop
    shouldComponentUpdate(nextProps, nextState){
        if(nextProps !== this.props){
            return true
        } else {
            return false
        }
    }

    render() {
        // Allows user to add another row
        const addRow = () => {
            this.setState({
                rows: this.state.rows + 1
            })
        }

        // Map through form array and create template
        if (this.formArray) {
            let form = this.formArray.map((field, index) => {
                return (
                    <Form.Row key={index} className="animated fadeIn">
                        <Col xs={5}>
                            <Form.Group className="mb-0 noValidate">
                                <Field
                                    label={field[0].label}
                                    attempt={this.props.attempt}
                                    name={field[0].fieldName}
                                    type={field[0].type}
                                    component={TextInput}
                                />
                            </Form.Group>
                        </Col>
                        <Col xs={5}>
                            <Form.Group className="mb-0 noValidate">
                                <Field
                                    label={field[1].label}
                                    attempt={this.props.attempt}
                                    name={field[1].fieldName}
                                    type={field[1].type}
                                    component={TextInput}
                                />
                            </Form.Group>
                        </Col>
                        <Col xs={2}>
                            <MaterialIcon icon="delete" className="mt-4" />
                        </Col>
                    </Form.Row>
                )
            })
        }
        return (
            <Container>
                {this.form}
                <Button variant="outline-success" onClick={addRow}>Add Another Student</Button>
            </Container>
        )
    }
}

const mapStateToProps = state => {
    return {
        // Get access to student state which will have form
        studentForm: state.students 
    };
  };
  
  const mapDispatchToProps = dispatch => {
    return {
        //Send formArray to redux
        setupStudentFormHandler: (form) => dispatch(setupStudentForm(form))  
    };
  };


export default withFirestore(
    reduxForm({
        form: "createStudents", validate
    })(connect(
            mapDispatchToProps,
            mapStateToProps
        )(CreateStudentsForm)
    )
);