Question

我看到了这个主题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

/ * COMPONENT * /

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;

/ * CONTAINER * /

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

Answer 1

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

1）是否定义了TodoForm ?, console.log它 2）TodoForm组件是？通过你的文件结构，看到文件，文件存在吗？该文件中是否存在组件？

Answer 2

来自react-redux API文档：

connect（[mapStateToProps]，[mapDispatchToProps]，[mergeProps]，[options]）

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

store的结果必须是一个普通的对象，它将是一个普通的对象，它将被合并到组件的道具

我建议多次阅读redux doc and its examples，直到您理解这些概念为止。

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

只需将mapStateToProps组件设为容器（即“已连接”）组件，即可通过道具免费获得TodoForm！

它看起来与此相似：

dispatch(..)

Answer 3

解决了：

问题是在一次运行时调用这两个代码的距离越近。

所以链条是下一个：

我们启动了同时尝试导入TodoForm;

TodoFormAdd

TodoFormAdd尚未使参数生效，并且开始崩溃。
然后TodoForm无法完成自己的编译并且崩溃。

就是这样。所以我只删除了import TodoFormAdd中的TodoForm，一切都变好了。

感谢所有人的帮助！

终极版/反应。您必须将组件传递给connect返回的函数。而是收到undefined

3 个答案: