Question

以下代码给出了

未捕获错误：您必须将组件传递给connect返回的函数。取而代之的是未定义的

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导入/导出语法的好文章：http://www.2ality.com/2014/09/es6-modules-final.html

Answer 2

更多详细信息，请参见here。

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

组件之间的循环依赖性

错误使用export和export default，然后以错误的方式导入

错误地使用了connect函数，传递了错误的参数

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

Answer 3

与询问者无关，但是，如果您遇到此错误，则值得检查您是否具有正确的connect（）语法：

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

export default PreloadConnect;

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

Answer 4

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

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

Answer 5

在我的情况下，这是因为使用了枚举（TypeScript）。尝试在代码中不使用枚举。

原因：运行时枚举可能不确定。

Link to Related Question

希望它可以解决您的问题：）

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

5 个答案: