Javascript 错误：元素类型无效：应为字符串或类/函数，但得到：对象

我得到了这个错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

检查

寄存器的渲染方法

这是我的注册码：

import React from 'react';
import Button from '../../../components/atoms/Button'; 
import { connect } from 'react-redux';
import { registerUserAPI } from '../../../config/redux/action';

class Register extends React.Component {
  state = {
    email: '',
    password: '',  
  }

  handleChangeText = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }

  handleRegisterSubmit = async () => {
    const {email, password} = this.state;
    const res = await this.props.registerAPI({email, password}).catch(err => err);
    if (res) {
      this.setState({
        email: '',
        password: ''
      }) 
    }  
  }
  render() {
    return (
      <div className="auth-container"> 
      <div className="auth-card">
        <p className="auth-title">Register Page</p>
        <input className="input" id="email" placeholder="Email" type="text" onChange={this.handleChangeText} value={this.state.email} />
        <input className="input" id="password" placeholder="Password" type="password" onChange={this.handleChangeText} value={this.state.password} />
        <Button onClick={this.handleRegisterSubmit} title="Register" loading={this.props.isLoading} />
      </div> 
      </div>
    );
  }
}

const reduxState = (state) => ({
  isLoading: state.isLoading
})

const reduxDispatch = (dispatch) => ({
  registerAPI: (data) => dispatch(registerUserAPI(data));
})

export default connect(reduxState, reduxDispatch)(Register);

从“React”导入React；
从“../../../components/atoms/Button”导入按钮；
从'react redux'导入{connect}；
从“../../config/redux/action”导入{registerUserAPI}；
类寄存器扩展了React.Component{
状态={
电子邮件：“”，
密码：“”，
}
handleChangeText=（e）=>{
这是我的国家({
[e.target.id]：e.target.value
})
}
HandlerRegisterSubmit=async（）=>{
const{email，password}=this.state；
const res=wait this.props.registerAPI（{email，password}）.catch（err=>err）；
如果（res）{
这是我的国家({
电子邮件：“”，
密码：“”
}) 
}  
}
render（）{
返回(
注册页面

);
}
}
const reduxState=（state）=>({
isLoading:state.isLoading
})
const reduxDispatch=（dispatch）=>({
registerAPI：（数据）=>调度（registerUserAPI（数据））；
})
导出默认连接（reduxState、reduxDispatch）（寄存器）；

应用程序

从“React”导入React；
从“react dom”导入react dom；
从“../TopupPage”导入TopupPage；
从“../Register”导入寄存器；
从“../Dashboard/Layout”导入仪表板；
从“../Login”导入登录名；
从“../Homepage”导入主页；
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”；
从'react redux'导入{Provider}；
从“../../../config/redux”导入{store}；
从“redux thunk”导入thunk；
从“redux”导入{createStore，applyMiddleware}；
函数App（）{
返回(
);
}
导出默认应用程序；
更改：

  <Route path="/login" component={<Login/>} />

您应该删除“；”
 正如错误所说，您正在原语值应该所在的位置传递某个对象

我最好的建议是，在
reduxState
中，您应该有如下内容：

const reduxState = (state) => ({
        isLoading: state.someKeyWhichYouAreMissing.isLoading
    })


消除bug的最佳方法是将整个渲染替换为：

render() {
  console.log(this.state.email, this.state.password, this.props.isLoading)
  return null;
}

您是否可以删除临时注册路由并检查错误是否存在，然后再次添加以确保错误与注册相关。我已经检查了您的注册代码，似乎没有任何问题。我确定问题与登录路径有关。是的，问题是注册和登录页面都有相同的问题。您可以删除“；”吗然后再次检查？您可以提供codesanbox链接来检查您的代码吗？
const reduxDispatch = (dispatch) => ({
  registerAPI: (data) => dispatch(registerUserAPI(data));
})


const reduxState = (state) => ({
        isLoading: state.someKeyWhichYouAreMissing.isLoading
    })


render() {
  console.log(this.state.email, this.state.password, this.props.isLoading)
  return null;
}