检查 `UserActionApp` 的渲染方法

Question

我是新来的 react 试图使用 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 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();
    


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;  

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

Answer 1

我认为你的问题来自这里，试试这个方法：

render() {  
    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} />}  
        {((this.state.isAddUser || this.state.isEditUser) && (
          <AddUser onFormSubmit={this.onFormSubmit} user={this.state.userData} /> 
        )) || null}
       </Container>  
      </div>  
    );  
  }  
}  

这样做的原因是，如果您在渲染中的条件为 false，userForm 未定义，并且 react 尝试渲染未定义，遇到问题。

希望这会有所帮助。