Element type invalid: expected a string or a class function

问题

I am new to react was trying to implement CRUD operations in React JS using web api. However, I am receiving an error which I do not understand.

The error is this:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
▶ 20 stack frames were collapsed.
Module../src/index.js
D:/crud-app/src/index.js:7
   4 | import * as serviceWorker from './serviceWorker';  
   5 | import '../node_modules/bootstrap/dist/css/bootstrap.min.css';  
   6 | import UserActionApp from './UserCRUD/UserAction'; 
>  7 | ReactDOM.render(<UserActionApp />, document.getElementById('root'));  
   8 | serviceWorker.unregister();
   9 | 
  10 | // If you want your app to work offline and load faster, you can change
View compiled

I am using useractionapp component in the file user action.js

Here is the code for index.js:

 import React from 'react';  
import ReactDOM from 'react-dom';  
import './index.css';  
import * as serviceWorker from './serviceWorker';  
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';  
import UserActionApp from './UserCRUD/UserAction'; 
ReactDOM.render(<UserActionApp />, 
document.getElementById('root'));  
serviceWorker.unregister();

Here is the code for User Action:

const apiUrl = 'http://localhost:44360/api/User/';  
  
class UserActionApp extends Component {  
  constructor(props) {  
    super(props);  
  
    this.state = {  
      isAddUser: false,  
      error: null,  
      response: {},  
      userData: {},  
      isEdituser: false,  
      isUserDetails:true,  
    }  
  
    this.onFormSubmit = this.onFormSubmit.bind(this);  
  
  }  
  
  onCreate() {  
    this.setState({ isAddUser: true });  
    this.setState({ isUserDetails: false });  
  }  
  onDetails() {  
    this.setState({ isUserDetails: true });  
    this.setState({ isAddUser: false });  
  }  
  
  onFormSubmit(data) {  
    this.setState({ isAddUser: true });  
    this.setState({ isUserDetails: false });  
    if (this.state.isEdituser) {  
     axios.put(apiUrl + 'UpdateEmployeeDetails',data).then(result => {  
      alert(result.data);  
        this.setState({  
          response:result,    
          isAddUser: false,  
          isEdituser: false  
        })  
      });  
    } else {  
     
     axios.post(apiUrl + 'InsertUserDetails',data).then(result => {  
      alert(result.data);  
        this.setState({  
          response:result,    
          isAddUser: false,  
          isEdituser: false  
        })  
      });  
    }  
    
  }  
  
  editUser = userId => {  
  
    this.setState({ isUserDetails: false });  
   axios.get(apiUrl + "GetUserDetailsById/" + userId).then(result => {  
  
        this.setState({  
          isEdituser: true,  
          isAddUser: true,  
          userData: result.data           
        });  
      },  
      (error) => {  
        this.setState({ error });  
      }  
    )  
     
  }  
  
  render() {  
    
    let userForm;  
    if (this.state.isAddUser || this.state.isEditUser) {  
  
      userForm = <AddUser onFormSubmit={this.onFormSubmit} user={this.state.userData} />  
       
    }  
    return (  
      <div className="App">  
 <Container>  
        <h1 style={{ textAlign: 'center' }}>CURD operation in React</h1>  
        <hr></hr>  
        {!this.state.isUserDetails && <Button variant="primary" onClick={() => this.onDetails()}> User Details</Button>}  
        {!this.state.isAddUser && <Button variant="primary" onClick={() => this.onCreate()}>Add User</Button>}  
        <br></br>  
        {!this.state.isAddUser && <UserList editUser={this.editUser} />}  
        {userForm}  
        </Container>  
      </div>  
    );  
  }  
}  
export default UserActionApp;  

Could you please help out in pointing out the error. Also I am using a different name for the file and the component. Is that causing an issue?

回答1:

In the UserActionApp file, are you importing react as

import React, { Component } from "react";

Otherwise

class UserActionApp extends Component

Won't work and you'll have to use

class UserActionApp extends React.Component

instead

来源：https://stackoverflow.com/questions/62775998/element-type-invalid-expected-a-string-or-a-class-function