元素类型无效:应为字符串或类函数 [英] Element type invalid: expected a string or a class function

问题描述

我是 React 的新手，正在尝试使用 Web api 在 React JS 中实现 CRUD 操作.但是，我收到了一个我不明白的错误.

错误是这样的:

错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:对象.您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入.▶ 20 个堆栈帧被折叠.模块../src/index.jsD:/crud-app/src/index.js:74 |import * as serviceWorker from './serviceWorker';5 |导入'../node_modules/bootstrap/dist/css/bootstrap.min.css';6 |从./UserCRUD/UserAction"导入 UserActionApp；>7 |ReactDOM.render(, document.getElementById('root'));8 |serviceWorker.unregister();9 |10 |//如果你想让你的应用离线工作并加载得更快，你可以改变查看编译

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

这是 index.js 的代码:

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

这是用户操作的代码:

const apiUrl = 'http://localhost:44360/api/User/';类 UserActionApp 扩展组件 {构造函数(道具){超级(道具)；this.state = {isAddUser: 假，错误:空，回复: {}，用户数据: {}，isEdituser: 假，isUserDetails:true,}this.onFormSubmit = this.onFormSubmit.bind(this);}onCreate() {this.setState({ isAddUser: true });this.setState({ isUserDetails: false });}细节(){this.setState({ isUserDetails: true });this.setState({ isAddUser: false });}onFormSubmit(数据){this.setState({ isAddUser: true });this.setState({ isUserDetails: false });如果(this.state.isEdituser){axios.put(apiUrl + 'UpdateEmployeeDetails',data).then(result => {警报(结果.数据)；this.setState({回应:结果，isAddUser: 假，isEdituser: 假})});} 别的 {axios.post(apiUrl + 'InsertUserDetails',data).then(result => {警报(结果.数据)；this.setState({回应:结果，isAddUser: 假，isEdituser: 假})});}}编辑用户 = 用户 ID =>{this.setState({ isUserDetails: false });axios.get(apiUrl + "GetUserDetailsById/" + userId).then(result => {this.setState({isEdituser: 真,isAddUser: 真,用户数据:result.data});},(错误) =>{this.setState({ 错误 });})}使成为() {让用户表单；如果(this.state.isAddUser || this.state.isEditUser){userForm = <AddUser onFormSubmit={this.onFormSubmit} user={this.state.userData}/>}返回 (
<容器><h1 style={{ textAlign: 'center' }}>React中的CURD操作</h1><hr></hr>{!this.state.isUserDetails &&<按钮变体=主要"onClick={() =>this.onDetails()}>用户详细信息}{!this.state.isAddUser &&<按钮变体=主要"onClick={() =>this.onCreate()}>添加用户</Button>}<br></br>{!this.state.isAddUser &&<UserList editUser={this.editUser}/>}{用户表单}</容器>
);}}导出默认的 UserActionApp；

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

解决方案

在UserActionApp文件中，你是否导入react as

import React, { Component } from "react";

否则

class UserActionApp 扩展组件

不起作用，你必须使用

class UserActionApp 扩展 React.Component

代替

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?

解决方案

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

这篇关于元素类型无效:应为字符串或类函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！