Javascript 您必须将一个组件传递给 connect 返回的函数。而是收到未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42324317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
You must pass a component to the function returned by connect. Instead received undefined
提问by Ram Kumar Parthiban
The code below gives
下面的代码给出
Uncaught Error: You must pass a component to the function returned by connect. Instead received undefined
未捕获的错误：您必须将一个组件传递给 connect 返回的函数。而是收到未定义
List.js
列表.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
PostList.js
import React from 'react'
export const PostList = (props) => {
return <div>List</div>
}
Please help me with a solution?
请帮我解决一下？
回答by Canastro
You are doing import PostList from '../components/PostList';so you need to use export defaultin your PostList.js file.
您正在这样做import PostList from '../components/PostList';，您需要export default在 PostList.js 文件中使用。
Otherwise you need to do import { PostList } from '../components/PostList';.
否则你需要做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
对于感兴趣的人，这里有一篇关于 es6 导入/导出语法的好文章：http://www.2ality.com/2014/09/es6-modules-final.html
回答by Lucas Bustamante
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:
与提问者无关，但如果您遇到此错误，则值得检查您的 connect() 语法是否正确：
const PreloadConnect = connect(mapStateToProps, {})(Preload);
export default PreloadConnect;
Note that Preload, is passed as a IIFE parameter.
请注意，Preload是作为 IIFE 参数传递的。
回答by spp
More details can be found here.
可以在此处找到更多详细信息。
There might be three reasons, that are summarized as follows:
可能有以下三个原因，总结如下：
- Circular dependencies between components
- Wrong usage of
exportandexport defaultthen imported the wrong way- Used the connect function wrongly, passed the wrong parameters
- 组件之间的循环依赖
- 用法错误
export，并export default再导入错误的方式- 错误地使用了connect函数，传递了错误的参数
In my case is was Circular dependencies, and the circular-dependency-pluginhelped me fix it.
在我的情况下是循环依赖，循环依赖插件帮助我修复了它。
回答by dzek
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.
在我的情况下，Expo 服务器有时无法捕获 Windows 上的文件保存（可能），并且它看到了我尝试连接的组件的旧版本（我可能还没有导出）。在没有真正触及任何东西的情况下重新保存我的组件解决了这个问题。
Restarting Expo server with cleaned cache would probably help as well.
使用清理过的缓存重新启动 Expo 服务器也可能会有所帮助。
