使用react-redux的connect时触发Invariant Violation错误求助

根据你提供的错误信息和代码，这个Element type is invalid错误通常是因为尝试渲染一个非组件类型的值（比如undefined或普通对象）导致的。结合你的代码，我梳理了几个最可能的问题点：

1. Home组件未正确导出 #

你提供的Home.js代码中，定义了Home类组件但没有导出它！在App.js中你通过import Home from './src/pages/Home'导入这个组件，但如果没有导出语句，导入的Home就是undefined，把undefined作为导航的screen组件自然会引发错误。

修复方法：在Home.js的末尾添加导出语句：

export default Home;

2. AppContainer的定义顺序错误 #

在App.js中，你在App函数内部引用了AppContainer，但AppContainer的定义是在App函数之后的：

function App() {
  return (
    <Provider store={store}>
      <AppContainer /> {/* 这里引用时AppContainer还未定义 */}
    </Provider>
  )
}
const MainNavigator = createStackNavigator(...)
const AppContainer = createAppContainer(MainNavigator);

JavaScript中const声明的变量存在暂时性死区，在App函数执行时AppContainer还未完成初始化，此时它的值是undefined，渲染undefined就会触发你看到的错误。

修复方法：调整代码顺序，先定义AppContainer再定义App函数：

const MainNavigator = createStackNavigator({
  Home: { screen: Home }
}, {
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
} );
const AppContainer = createAppContainer(MainNavigator);

function App() {
  return (
    <Provider store={store}>
      <AppContainer />
    </Provider>
  )
}

3. 可选：版本兼容性排查 #

你使用的react-redux@7.0.1相对expo@32.0.6来说版本较新，可能存在潜在的兼容性问题。如果前两个修复都无效，可以尝试降级react-redux到6.x版本（比如6.0.1）：

npm install react-redux@6.0.1
# 或者用yarn
yarn add react-redux@6.0.1

4. 额外检查：Redux reducer结构 #

虽然这个不会直接引发当前错误，但需要确认你的rootReducer中正确合并了filter reducer，否则mapStateToProps中state.filter.eventType会抛出Cannot read property 'eventType' of undefined的错误。确保rootReducer类似这样：

import { combineReducers } from 'redux';
import filter from './filterReducer'; // 你的filter reducer文件

const rootReducer = combineReducers({
  filter,
  // 其他reducer...
});

export default rootReducer;

先尝试前两个修复，这两个是最可能导致当前错误的原因。

内容的提问来源于stack exchange，提问作者Vlad