不变冲突:元素类型无效:预期使用 react-redux 连接的字符串

Question

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

Redux 用作存储。它是通过世博会建造的。在使用 react-redux 的连接时，我遇到了以下错误：不变冲突：不变冲突：元素类型无效：需要字符串(对于内置组件(或类/函数(对于复合组件(，但得到：对象。检查 Home 的渲染方法。

如果 Home 组件呈现的组件未被 connect(( 包装，则应用程序将正常工作。

在下面附加一些代码。

应用.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;

首页.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>
    )
  }
}

切换事件类型.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);

商店.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 };
};

包.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"
  },

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

Answer 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
};