Question

我有一个React应用，但在呈现登录页面时遇到了问题。我已将其切碎为重新创建它所需的最低限度：

App.js

import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { LoginPage } from './LoginPage/LoginPage';

export default class App extends Component {
  displayName = App.name

  render() {
    return (
      <Layout>
            <Route path="/login" component={LoginPage} />
      </Layout>
    );
  }
}

LoginPage.jsx

import React from 'react';
import { connect } from 'react-redux';

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

    render() {
        return (
            <h2>Login</h2>
        );
    }
}

function mapStateToProps(state) {
    const { loggingIn } = state.authentication;
    return {
        loggingIn
    };
}

const connectedLoginPage = connect(mapStateToProps)(LoginPage);
export { connectedLoginPage as LoginPage };

当我尝试运行该应用程序时，出现此错误：

“元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。

检查Connect(LoginPage)“

的渲染方法

通过观察类似的问题，它似乎在React的导入/导出功能中有所作用，但是我不能完全使它起作用。

我被标记为this question的副本，但是那里被广泛接受的答案说要删除导入周围的花括号。如果我在App.js中执行此操作，则错误更改为

Attempted import error: './LoginPage/LoginPage' does not contain a default export (imported as 'LoginPage').

据我所知，它可以正确导出，但是无论使用括号还是不使用括号都无法导入。

元素类型无效：应为字符串或类/函数，但已获得对象

0 个答案: