Redux/React. You must pass a component to the function returned by connect. Instead received undefined

问题

I see this topic You must pass a component to the function returned by connect. Instead received undefined, but it's does not about my case.

So, I cannot undurstand what is the wrong with my presentation/container connection?

I connect they one to each other, but I get an error: 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);

回答1:

Solved:

The problem had been in the closer of invoke these two codes in one time of running.

So the chain is the next:

We start the component TodoForm that also try to import TodoFormAdd;
TodoFormAdd does not already got the parameters to work and start begins to crash.
Then TodoForm cannot finish compilation themself and aslo crash.

And that it. So I just delete import TodoFormAdd in TodoForm and and everything became good.

Thank's for all for help!

回答2:

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

1) Is TodoForm defined?, console.log it 2) Is TodoForm component? go through you file structure and see the file, is file exists? is component exists in this file?

回答3:

From react-redux API Doc:

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

connect(..) takes mapStateToProps function as its first argument, and your TodoFormAdd doesn't seem like a valid mapStateToProps, which should take the store state as its input, and return a plain object

The results of mapStateToProps must be a plain object which will a plain object, which will be merged into the component’s props

I recommend reading the redux doc and its examples multiple times, until you understand the concepts well.

I won't write the whole code for you, but in your case, TodoFormAdd seems redundant.

Just make TodoForm component a container (i.e. 'connected') component, and you get dispatch(..) for free passed through props!

It will look similar to this:

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

来源：https://stackoverflow.com/questions/49590362/redux-react-you-must-pass-a-component-to-the-function-returned-by-connect-inst

标签

reactjs

redux