错误：元素类型无效：需要字符串或类/函数，但得到：object

Question

我收到此错误：

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

检查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;

Answer 1

改变：

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

至

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

这里还有一个语法错误：

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

你应该删除';'。

Answer 2

正如错误所说，您正在将一些 object 传递到原始值应该所在的位置。

我最好的办法是在reduxState你应该有这样的东西：

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

调试的最佳方法是将整个渲染替换为：

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