React Native 使用Redux出现错误:Element type is invalid,求救!!



  • 完整的错误如下:

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `MyAwesomeApp`.
    

    index.android.js

    var React = require('react-native');
    var ReactJChat = require('./containers/ReactJChat');
    var MyAwesomeApp = React.createClass({
      
        render() {
          return (
            <ReactJChat />
          );
        }
    });
    React.AppRegistry.registerComponent('JChatApp', () => MyAwesomeApp);
    
    

    ReactJChat.js

    import React from 'react-native';
    var {
        Component,
    } = React;
    import { Provider } from 'react-redux';
    import { createStore, applyMiddleware, combineReducers } from 'redux';
    import thunk from 'redux-thunk';
    import rootReducer from '../reducers/index';
    import BaseApp from './BaseApp';
    
    const createStoreWithThunk = applyMiddleware(thunk)(createStore);
    const store = createStoreWithThunk(rootReducer);
    
    export default class ReactJChat extends Component {
        render() {
            return (
                //通过Provider把store传给了真正的app入口,即BaseApp
                <Provider store = { store }>
                    <BaseApp />
                </Provider>
            );
        }
     }
    

    BaseApp.js

    import { bindActionCreators } from 'redux';
    import { connect } from 'react-redux';
    import * as actions from '../actions';
    
    class BaseApp extends Component {
    
        constructor(props) {
            super(props);
            this.initialRoute = {
                name: 'mainActivity',
                component: MainActivity,
            }
        }
    
        renderScene(route, navigator) {
            let Component = route.component;
            return ( 
                <Component 
                    { ...route.params }
                    navigator = { navigator }
                />
            );
        }
    
        render() {
            return (
                <View>
                <Navigator
                    initialRoute = { {name: 'mainActivity'} }
                    configureScene = { this.configureScene }
                    renderScene = { this.renderScene }
                />
                </View>
            );
        }
    }
    
    function mapStateToProps(state) {
        return {
            state: state
        }
    }
    
    function mapDispatchToProps(dispatch) {
        return bindActionCreators(actions, dispatch);
    }
    
    export default connect(mapStateToProps, mapDispatchToProps) (BaseApp);
    
    

    我没用Redux架构之前App是可以跑起来的,Redux相关项目也应该正确导入了,但是现在怎么也找不到解决办法。求指点迷津!


  • administrators

    export必须和import搭配 不能用require引入



  • ...的解构不对,意思就是es6的写法有问题,问题出在组件的属性的...的解构上



  • @EvanJin 你的意思是这个{ ...route.params } 这个写法不对? 不会啊,我之前也是这样写的,没问题。


  • administrators

    @KenChoi 说:

    var ReactJChat = require('./containers/ReactJChat');

    这里改import



  • @sunnylqm 改了,好像真是这个问题,真是操蛋。。。谢谢谢哈


登录后回复