Redux/React. 您必须将一个组件传递给connect返回的函数。而不是接收到undefined。

10 浏览
0 Comments

Redux/React. 您必须将一个组件传递给connect返回的函数。而不是接收到undefined。

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

                
                
            

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

0

3 答案

0 Comments

问题原因：在运行过程中，存在同时调用这两个代码的闭包问题。

解决方法：删除TodoForm中的import TodoFormAdd语句。

问题分析：

1. 我们启动了组件TodoForm，它试图导入TodoFormAdd；

2. TodoFormAdd没有获得需要的参数而开始崩溃；

3. 然后TodoForm无法完成自身的编译，也崩溃了。

解决方法就是删除TodoForm中的import TodoFormAdd语句，这样一切都恢复正常了。感谢大家的帮助！

0
0 Comments

在使用React和Redux开发过程中，有时会遇到如下错误提示：Redux/React. You must pass a component to the function returned by connect. Instead received undefined。出现这个错误的原因是因为在connect函数的第一个参数中传入了一个不合法的mapStateToProps函数，该函数应该接受store的state作为输入，并返回一个普通对象。正确的写法应该是将组件包装成一个容器组件，然后通过props传递dispatch函数。

解决这个问题的方法是将组件包装成容器组件，并正确实现mapStateToProps函数。下面是一个示例代码：

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

在上面的代码中，TodoForm组件被包装成了一个容器组件，并通过connect函数传入了mapStateToProps函数。在TodoForm组件的handleSubmit方法中，可以通过this.props获取到dispatch函数，并进行相应的操作。

建议多次阅读Redux文档和示例，直到对概念有清晰的理解。通过正确使用connect函数，可以轻松地将Redux的状态和操作传递给组件，提高开发效率。

0
0 Comments

问题的出现原因是在使用Redux的connect函数时，传入的组件参数为undefined。

解决方法是将TodoForm组件正确地导出，并将其作为connect函数的参数传入。

具体操作如下：

1. 首先，检查TodoForm组件是否已经定义。可以使用console.log语句来输出TodoForm变量，并观察输出结果。

2. 然后，确认TodoForm是一个组件。可以查看文件结构，确保TodoForm所在的文件存在，并且在该文件中确实定义了TodoForm组件。

3. 如果TodoForm已经定义且是一个组件，但在connect函数中仍然报错undefined，可以尝试使用以下代码将TodoForm组件正确导出，并作为connect函数的参数传入：

   import TodoForm from '../Components/TodoForm/TodoForm';
   export default connect(null, { TodoFormAdd })(TodoForm);

通过以上操作，可以解决Redux/React中出现"Redux/React. You must pass a component to the function returned by connect. Instead received undefined"的问题。

0