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

Question

下面的代码给出了

未捕获的错误：您必须将组件传递给连接返回的函数。而是收到 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

就我而言，这是因为使用了枚举（TypeScript）。 尝试在您的代码中不使用枚举。

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

Link to Related Question

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

Answer 2

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

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

Answer 3

更多详情请见here。

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

• 组件之间的循环依赖
• 错误使用export 和export default 然后导入错误的方式
• 错误使用了connect函数，传递了错误的参数

在我的情况下是循环依赖，circular-dependency-plugin 帮助我修复了它。

Answer 4

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

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

export default PreloadConnect;

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

Answer 5

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

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

对于感兴趣的人，这里有一篇关于 es6 导入/导出语法的好文章：http://www.2ality.com/2014/09/es6-modules-final.html