Question

我正在开发React js服务器端呈现的应用程序。我的category.js中有Home.js，我也想对这两个文件进行ssr。

Home.js

    import React, { Component } from 'react';
    import { connect } from "react-redux";
    import { bindActionCreators } from "redux";
    import { loadMenuCategories } from "../actions/Home";
    import { component as Menu }  from './components/Menu';
    import { component as DefaultCategory } from './Category';

    class Home extends Component {
    componentWillMount() {
            this.props.loadMenuCategories();
        }

     render() {
      const { categories, selectedCat } = this.props;
      return (
                <div >
                 <Menu/>
                 <DefaultCategory />
               </div >
      );
     }
     }
    }

    function mapDispatchToProps(dispatch,ownProps) {

        return bindActionCreators({ loadMenuCategories}, dispatch);
    }

    function mapStateToProps({ categories }) {
        return { categories };
    }

   function loadData(Store,Props) { 
    return Promise.all([
        Store.dispatch( loadMenuCategories()) 
      ]);

   } 

    export default {
        loadData,
        component: connect(mapStateToProps, mapDispatchToProps)(Home)
    };

category.js

import React, { Component, PureComponent } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import {CATS } from '../config';

class Category extends PureComponent {
  componentWillMount() {
        CATS.map(data => {
            this.props.fetchCategorySliders(data, LIMIT);
        });
    }
}

render() {
return (
            <div >
               .......
               ......
           </div >
  );
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchCategorySliders }, dispatch);
}

function mapStateToProps({ new_release, trending, editor, video_details,vStatus }) {
    return { new_release, trending, editor, video_details,vStatus };
}
function loadData(store, path) {
    return Promise.all([
        CATS.map(data => {
            Store.dispatch( fetchCategorySliders(data));
        })       
      ]);
}
export default {
    loadData,
    component: withRouter(connect(mapStateToProps, mapDispatchToProps)(Category))
};

但是我遇到了下面的错误。

警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。在家在Connect（主页）在途中在开关在div 在应用程式中在途中在开关在div 在路由器中在StaticRouter中在提供者中（节点：9310）UnhandledPromiseRejectionWarning：未处理的承诺拒绝（拒绝ID：1）：不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（用于复合组件）但得到了：对象。

React SSR导出默认组件

0 个答案: