您必须将一个组件传递给 connect 返回的函数。 而是收到未定义

Question

The code below gives

Uncaught Error: You must pass a component to the function returned by connect. Instead received undefined

List.js

import React from 'react';
import { connect, bindActionCreators } from 'react-redux';
import PostList from '../components/PostList'; // Component I wish to wrap with actions and state
import postList from '../Actions/PostList' //Action Creator defined by me

const mapStateToProps = (state, ownProps) => {
    return state.postsList
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({"postsList":postList},dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(PostList);

PostList.js

import React from 'react'

export const PostList = (props) => {
    return <div>List</div>
}

Please help me with a solution?

Answer 1

You are doing import PostList from '../components/PostList'; so you need to use export default in your PostList.js file.

Otherwise you need to do import { PostList } from '../components/PostList'; .

To whoever is interested, here is a nice article about es6 import/export syntax: http://www.2ality.com/2014/09/es6-modules-final.html

Answer 2

Not related to the asker specifically, but if you're facing this error, it's worth to check if you have the connect() syntax right:

const PreloadConnect = connect(mapStateToProps, {})(Preload);

export default PreloadConnect;

Note that Preload , is passed as a IIFE parameter.

Answer 3

More details can be found here .

There might be three reasons, that are summarized as follows:

• Circular dependencies between components
• Wrong usage of export and export default then imported the wrong way
• Used the connect function wrongly, passed the wrong parameters

In my case is was Circular dependencies, and the circular-dependency-plugin helped me fix it.

Answer 4

In my case it was Expo server that sometimes doesn't catch filesaves on Windows (probably) and it was seening old version of the component I've tried to connect (I had no export there yet probably). Re-saving my component without really touching anything fixed the issue.

Restarting Expo server with cleaned cache would probably help as well.

Answer 5

In my case, it was because of the usage of enums (TypeScript). Try without enums in your code.

Reason : Enums can go undefined during runtime.

Link to Related Question

Hope it solves your problem :)