javascript - 错误:元素类型无效:应为字符串或类/函数,但得到:对象
问题描述
我收到此错误:
元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)但得到:对象。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
检查Register
.
这是我的注册码:
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);
应用程序
import React from 'react';
import ReactDOM from 'react-dom';
import TopupPage from '../TopupPage';
import Register from '../Register';
import Dashboard from '../Dashboard/Layout';
import Login from '../Login';
import Homepage from '../Homepage';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from '../../../config/redux';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
function App(){
return (
<Provider store={store}>
<Router>
<div>
<Route path="/" exact component={Homepage} />
<Route path="/register" component={Register} />
<Route path="/TopupPage" component={TopupPage} />
<Route path="/login" component={Login} />
</div>
</Router>
</Provider>
);
}
export default App;
解决方案
改变:
<Route path="/login" component={<Login/>} />
至
<Route path="/login" component={Login} />
这里还有一个语法错误:
const reduxDispatch = (dispatch) => ({
registerAPI: (data) => dispatch(registerUserAPI(data));
})
你应该删除';'。
推荐阅读
- react-native - React Native 中的自定义标签栏
- apache - 如何使用 Apache Lucenes Indexer 搜索来搜索日语单词?
- css - 如何创建如图所示的响应式网格设计?
- jira - 一个项目 JIRA Ticket 中的更改如何反映另一个项目中的链接工单
- sql - 在红移中将日期转换为 DD-MMM-YY
- user-interface - Octave GUI 开发
- windows - 将 wxWidgets 与 MinGW、CMake 和 Code::Blocks 一起使用
- c# - 在 asp.net 中获取客户端 Windows 用户 ID,用于 LDAP 单点登录
- node.js - 多个 RESTful API 服务的 NodeJS 身份验证
- go - 为什么 %T 不打印我的常量的类型?