Question

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

所以，问题是 - 问题是什么？我已经弄清楚了..

/ * COMPONENT * /

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

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

终极版/反应。 TypeError：无法将类作为函数调用

1 个答案: