Question

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

Redux用作存储。它是通过Expo构建的。使用react-redux的连接时，出现以下错误：不变违反：不变违反：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查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"
  },

怎么回事？请帮忙。谢谢。

Answer 1

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

action

不变违规：元素类型无效：使用react-redux的连接需要一个字符串

1 个答案: