You must pass a component to the function returned

问题:

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?

回答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

回答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.