您必须将组件传递给 connect 返回的函数。而是收到了 undefined

Question

下面的代码给出

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

请帮我解决一下？

Answer 1

您正在执行 import PostList from '../components/PostList';，因此您需要在 PostList.js 文件中使用 export default。

否则你需要import { PostList } from '../components/PostList';。

感兴趣的朋友，这里有一篇关于 es6 import/export 语法的好文章：http://www.2ality.com/2014/09/es6-modules-final.html

Answer 2

与提问者具体无关，但如果您遇到此错误，则值得检查您的 connect() 语法是否正确：

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

export default PreloadConnect;

请注意，Preload 作为 IIFE 参数传递。

Answer 3

可以找到更多详细信息 here。

可能有以下三个原因，总结如下：

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

在我的例子中是循环依赖，circular-dependency-plugin 帮助我修复了它。

Answer 4

在我的例子中，是 Expo 服务器有时无法捕获 Windows 上的文件保存（可能）并且它看到了我尝试连接的组件的旧版本（我还没有导出）大概）。重新保存我的组件而不真正接触任何东西解决了这个问题。

使用清理过的缓存重新启动 Expo 服务器可能也会有所帮助。

Answer 5

就我而言，这是因为使用了枚举 (TypeScript)。尝试在代码中不使用枚举。

原因：枚举在运行时可能未定义。

希望它能解决您的问题:)

您必须将组件传递给 connect 返回的函数。而是收到了 undefined

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

javascript

reactjs

redux

react-redux