不变违规：元素类型无效：预期使用 react-redux 连接的字符串答案

【问题标题】：Invariant Violation: Element type is invalid: expected a string using connect of react-redux不变违规：元素类型无效：预期使用 react-redux 连接的字符串
【发布时间】：2019-10-24 05:38:03
【问题描述】：

据说，我有一个小问题，但无法解决。我有一个小的 React-Native 应用，只有一个屏幕。

Redux 被用作商店。它是通过世博会建造的。在使用 react-redux 的连接时，出现以下错误： Invariant Violation：Invariant Violation：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。检查Home的渲染方法。

如果 Home 组件渲染的组件没有被 connect() 包裹，则应用可以正常工作。

在下面附上一些代码。

App.js

import React from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './src/pages/Home';
import { Provider } from 'react-redux';
import configureStore from './src/stores/store';

const { store } = configureStore();

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

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

const AppContainer = createAppContainer(MainNavigator);

export default App;

Home.js

import React from "react";
import { StyleSheet, View, Text, Dimensions } from "react-native";
import SwitchEventTypes from "../components/SwitchEventTypes";

class Home extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <View>
        <SwitchEventTypes />
      </View>
    )
  }
}

SwitchEventTypes.js

import React, { Component } from "react";
import { connect } from 'react-redux';
import { StyleSheet, View, Text, Dimensions, TouchableOpacity } from "react-native";
import { updateEventType } from '../actions/actions';

const mapDispatchToProps = (dispatch) => {
    return {
        updateEventType: (newEventType) => {
            dispatch(updateEventType(newEventType));
        }
    };
};

const mapStateToProps = (state) => {
    return {
        eventType: state.filter.eventType,
    };
};

class SwitchEventTypes extends React.Component {
    constructor() {
        super();
        this.state = {
            isSwitchEventTypeOn: true
        }

        this.handleEventTypeChange = this.handleEventTypeChange.bind(this);
    }

    handleEventTypeChange(newEventType) {
        this.props.updateEventType(newEventType);
    }

    render() {
        return (
            <View style={styles.switchTypesContainer}>
                {this.props.eventType === 'active' ? <Text>123</Text> : 
                  <Text>456</Text>
                }
            </View>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SwitchEventTypes);

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const middleware = [thunk];

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const composedEnhancers = composeEnhancers(
  applyMiddleware(...middleware),
)

export default () => {
  const store = createStore(rootReducer, composedEnhancers);
  return { store };
};

package.json

  "dependencies": {
    "expo": "^32.0.6",
    "expo-react-native-shadow": "^1.0.3",
    "expo-svg-uri": "^1.0.1",
    "prop-types": "^15.7.2",
    "react": "16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.1.tar.gz",
    "react-native-calendars": "^1.32.0",
    "react-native-svg": "^9.4.0",
    "react-navigation": "^3.9.1",
    "react-redux": "^7.0.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "react-native-switch": "^1.5.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "redux-devtools-extension": "^2.13.8",
    "schedule": "^0.4.0"
  },

可能是什么问题？请帮忙。谢谢。

【问题讨论】：

我看不到您的 Home.js 文件中有导入 SwitchEventTypes 类。你是不是忘记在这里提了？
忘了说。删除了代码部分以使其易于阅读。如果我使用 export default SwitchEventTypes 而不是 export default connect(mapStateToProps, mapDispatchToProps)(SwitchEventTypes); 此代码有效在 SwitchEventTypes.js
你能用你在 Home.js 中导入这个 SwitchEventTypes 类的方式更新你的答案吗？
从“../components/SwitchEventTypes”导入 SwitchEventTypes；（更新了代码）。
你有没有想过这个问题？

标签： react-native react-redux react-native-navigation

【解决方案1】：

您的 mapDispatchToProps 正在返回一个对象。您也不需要额外的返回，因为胖箭头函数已经有一个隐式返回。将使您的代码更具可读性。

const mapDispatchToProps = dispatch => ({
    updateEventType: (newEventType) => dispatch(updateEventType(newEventType));
});

const mapStateToProps = state => {
    eventType: state.filter.eventType, // might be worth your time to investigate selectors down the road
};

【讨论】：