元素类型无效：预期为字符串或类函数

我是新来的响应者，试图使用Web API在React JS中实现CRUD操作。但是，我收到一个我不明白的错误。

错误是这样的：

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

我正在文件用户action.js中使用useractionapp组件

这是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();

以下是用户操作的代码：

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;  

请帮忙指出错误。另外，我为文件和组件使用了不同的名称。这会引起问题吗？