还原/反应。您必须将组件传递给 connect 返回的函数。而是收到未定义的答案

【问题标题】：Redux/React. You must pass a component to the function returned by connect. Instead received undefined还原/反应。您必须将组件传递给 connect 返回的函数。而是收到未定义的
【发布时间】：2018-09-10 10:27:34
【问题描述】：

我看到了这个话题You must pass a component to the function returned by connect. Instead received undefined，但这与我的情况无关。

那么，我无法理解我的演示文稿/容器连接出了什么问题？

我将它们相互连接，但出现错误：You must pass a component to the function returned by connect. Instead received undefined

/* 组件 */

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

class TodoForm extends React.Component{   
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();

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

    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 TodoForm from '../Components/TodoForm/TodoForm'
import AddTodo from '../Actions/AddTodo'

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

export default connect(TodoFormAdd)(TodoForm);

【问题讨论】：

你确定import TodoForm from '../Components/TodoForm/TodoForm'的路径是正确的

标签： reactjs redux

【解决方案1】：

已解决：

问题在于在一次运行中调用这两个代码更接近。

所以链条是下一个：

我们启动组件TodoForm，它也尝试导入TodoFormAdd；
TodoFormAdd 尚未使参数生效并开始崩溃。
那么TodoForm自己无法完成编译，还崩溃了。

那就是它。所以我只是删除了TodoForm 中的import TodoFormAdd，然后一切都变好了。

感谢大家的帮助！

【讨论】：

【解决方案2】：

import TodoForm from '../Components/TodoForm/TodoForm'.

1) TodoForm 定义了吗？，console.log 它 2) 是TodoForm 组件吗？浏览你的文件结构并查看文件，文件是否存在？该文件中是否存在组件？

【讨论】：

1.是的，已定义。这很奇怪，但是console.log 确实从TodoFormAdd 容器中显示TodoForm 的undefined 状态。 2. 是的，TodoForm 是一个组件。此外，如果该文件不存在，编译将不会完成。所以这肯定是另一个原因，为什么我们仍然会从TodoFormAdd 调用TodoForm 组件得到undefined
@Max Wolfen 好的尝试像这样导出你的组件connect(null, { TodoFormAdd })(TodoForm);

【解决方案3】：

来自react-redux API 文档：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect(..) 将mapStateToProps 函数作为其第一个参数，而您的TodoFormAdd 似乎不是一个有效的mapStateToProps，它应该将store 状态作为其输入，并返回一个普通对象

mapStateToProps 的结果必须是一个普通对象，这将是一个普通对象，它将被合并到组件的 props 中

我建议多读几遍 redux doc and its examples，直到你很好地理解了这些概念。

我不会为你编写整个代码，但在你的情况下，TodoFormAdd 似乎是多余的。

只要将TodoForm组件做成一个容器（即'connected'）组件，你就可以通过props免费获得dispatch(..)！

它看起来类似于：

class TodoForm extends React.Component {
    ...

    handleSubmit(e) {
        const { dispatch } = this.props;
        e.preventDefault();

        document.querySelector('input').input.value = '';   
        dispatch(AddTodo(input));
    }

    ...
}

function mapStateToProps(state) {
  return {
  // your mapStateToProps return object
  };
}

export default connect(mapStateToProps)(TodoForm);

【讨论】：