还原/反应。 TypeError：无法将类作为函数调用答案

【问题标题】：Redux/React. TypeError: Cannot call a class as a function还原/反应。 TypeError：无法将类作为函数调用
【发布时间】：2018-09-10 13:49:52
【问题描述】：

所以，我对问题标题中所说的错误有疑问。我看到了这个答案Getting "Cannot call a class as a function" in my React Project，但我对Component extends没有任何问题，你可以看到它在代码中正常实现。

那么，问题是——问题是什么？我已经想不通了..

/* 组件 */

import React from 'react';
import AddTodo from '../../Actions/AddTodo'
import TodoFormAdd from '../../Containers/TodoFormAdd'

class TodoForm extends React.Component{   
    constructor(props) {
        super(props);
    }

    handleSubmit = (e) => {
        e.preventDefault();

        let input = document.querySelector('input').value; 
        TodoFormAdd(this.props.store, input);  
        input = '';
    }

    render() {
        return (
            <form id="tp" onSubmit={this.handleSubmit}>
                <input type="text" placeholder="Your text" />
                <button type="submit">Add todos</button>
            </form>
        );  
    }
}
export default TodoForm;

/* 上面组件的容器 */

import { connect } from 'react-redux';
import AddTodo from '../Actions/AddTodo'
import TodoForm from '../Components/TodoForm/TodoForm'

let TodoFormAdd = (store, input) => {
    store.dispatch(AddTodo(input));
}

export default connect()(TodoForm);

【问题讨论】：

不要这样写你的组件。您的 TodoFormAdd 只是试图发送一些东西，但不做任何关于渲染的事情。那么你为什么要分离你的组件呢？当你将你的组件连接到 Redux 时，你不需要将 store 传递给它。你有派遣作为道具。我在另一个问题中重新访问了我的代码。查看代码并尽可能简单地开始。
@devserkan "那么你为什么要分离你的组件" - 因为，我想把我的演示文稿从容器中分离出来
抱歉误会，我不是问你为什么要分离组件。如果您的一个组件只是进行调度，为什么需要将其分开？这不是正确的方法。在您之前提供 Redux 文档的问题中，有很好的示例。 Container 连接到 Redux，渲染 pres。组件，传递必要的东西。如果你喜欢你在这里做的，例如你将如何将任何状态传递给你的 pres。未来的组件？

标签： reactjs redux

【解决方案1】：

问题是你在这一行从/Containers/TodoFormAdd 导出一个组件：

export default connect()(TodoForm)

看起来您想将调度传递给您的组件。您需要将mapDispatchToProps 函数传递给您的connect 函数：

const mapPropsToDispatch = dispatch => {
  return {
    todoFormAdd: input => dispatch(addTodo(input))
  }
}

connect(null, mapDispatchToProps)(TodoForm)

然后从您的组件中，您可以调用调度。

//TodoForm Component
this.props.todoFormAdd(input)

【讨论】：