React-Redux 的 connect() 方法抛出 TypeError

Question

正在研究 Dan Abramov 的 Redux 优秀教程，以及第 27 章 - 使用 connect() 生成容器 - 出现了一个奇怪的错误：

首先我定义了这两个函数：

const mapStateToProps = (state) => {
   return {
      todos: getVisibleTodos(state.todos, state.visibilityFilter)
   };
}
const mapDispatchToProps = (dispatch) => {
   return {
      onTodoClick: (id) => {
         dispatch({
            type: 'TOGGLE_TODO',
            id
         })
      }
   }
}

然后我导入必要的依赖：

import { connect } from 'react-redux'

然后我使用从 react-redux 公开的方法创建我的组件，并传入两个函数，最后连接到我的另一个组件，TodoList。

const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);

当我这样做时，它会导致浏览器无法呈现和控制台 returns:

TypeError: Cannot read property 'displayName' of undefined

我以前从未遇到过这个错误，它似乎是 react-redux 的 connect() 方法所特有的。

有没有人以前遇到过这种情况，and/or知道是什么原因造成的吗？

更新：

getVisibleTodos 定义如上。如果它 TodoList 你想看...

const TodoList = ( {todos, onTodoClick} ) => (
   <ul>
      {todos.map(todo =>
         <Todo key={todo.id}
            {...todo}
            onClick={() => onTodoClick(todo.id)}
         />
      )}
   </ul>
)

Answer 1

您可能在调用 connect 之后定义 TodoList 组件。与 var 关键字不同，ES6 关键字如 let、const 和 class not 会被提升到顶部范围，并且只存在于它们被声明的那一行。因此，如果您在定义 TodoList 之前调用 connect()，您实际上是运行 connect()(undefined)。也有可能您的导入语句不正确，这也可能导致 TodoList 未定义。

有关进一步的讨论，请参阅 https://github.com/reactjs/react-redux/issues/253。

React-Redux 的 connect() 方法抛出 TypeError

React-Redux's connect() method throwing TypeError

javascript

reactjs

redux

connect

react-redux