检查UserActionApp的渲染方法

我是新来的响应者，试图使用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

我正在用户user.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();
    


Here is the code for User Action:

    import React, { Component } from 'react';  
      
    import { Container, Button } from 'react-bootstrap';  
    import UserList from './GetUser';  
    import AddUser from './AddUser';  
    import axios from 'axios';
        
    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;  

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