Question

我正在尝试在我的Cloud Web服务器上部署我的react应用程序。但是我收到消息“无法读取未定义的属性'Component'”。

这是我的代码：

//App.js
import React from 'react';
import './App.css';
import './bootstrap.min.css';
import Listitems from './Listitems.js';
import Cart from './Cart.js';
import Products from './Products.json'


class App extends React.Component{
    constructor(props){
        super(props);
        this.handler = this.handler.bind(this)
        this.state = {
            inCart:[],
            ref:[],
            revenue:0
        }
    }

handler(obj, ref) {
    this.setState({
      inCart: obj,
      ref:ref
    });
    var x;
    var revenue = [];
    const reducer = (accumulator, currentValue) => accumulator + currentValue;  
    for(x in obj){
        revenue.push(obj[x].price * obj[x].quantity)
    }
    if(revenue.length !== 0) {
        this.setState({revenue:revenue.reduce(reducer)})
    } else {
        this.setState({revenue:0})
    }
}
render(){
    var x;
    var cartLength = 0;
    for(x in this.state.inCart){
        cartLength += this.state.inCart[x].quantity
    }
    return (
        <div className="App " >
            <div className="container-fluid">
                <nav className="navbar navbar-light bg-light shadow w-100">
                    <a className="navbar-brand" href="www.google.fr" >Mon projet panier</a>
                    <div>Panier <span data-v-d39b0b74="" className="badge badge-success">{cartLength}</span></div>
                </nav>
                <div id="mdm-cart" className="container">
                    <h1 className="title border-bottom mb-5 display-1">Mon panier</h1>
                    <div className="content">
                        <div className="row">
                            <div className="basket col-md-8">
                                <Cart  viewCart={this.state.viewCart} handler={this.handler} reference={this.state.ref} inCart={this.state.inCart} revenue={this.state.revenue}/>
                            </div>
                            <div className="liste col-md-4">
                                <h2>Produits en relation :</h2>
                                <Listitems key={Products.id} data={Products} handler={this.handler} reference={this.state.ref} inCart={this.state.inCart}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  );
}   
}

export default App;

我也尝试过使用其他导入方法，例如：

const { React } = require('react');
import React, { Component } from 'react';

这是错误消息：

Uncaught TypeError: Cannot read property 'Component' of undefined
at Module.<anonymous> (App.js:15)
at l ((index):1)
at Object.<anonymous> (main.e870a004.chunk.js:1)
at l ((index):1)
at a ((index):1)
at Array.e ((index):1)
at main.e870a004.chunk.js:1

编辑：添加Package.json文件

{
 "name": "Mon projet panier",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
   "@babel/polyfill": "^7.7.0",
   "babel-plugin-import": "^1.13.0",
   "bootstrap": "^4.4.1",
   "customize-cra": "^0.9.1",
   "react": "^16.12.0",
   "react-app-rewired": "^2.1.5",
   "react-bootstrap": "^1.0.0-beta.16",
   "react-dom": "^16.12.0",
   "react-scripts": "3.2.0"
 },
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "eslintConfig": {
   "extends": "react-app"
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 },
 "devDependencies": {
   "@babel/cli": "^7.7.7",
   "@babel/core": "^7.7.7",
   "@babel/preset-env": "^7.7.7"
 }
}

奇怪的是，该错误位于App：15中，但是代码需要知道什么是React.Component才能到达那里。

如果有人有任何线索，我将不胜感激！

Answer 1

试试这个：import React, { Component } from 'react';

Answer 2

帮不上什么忙，但基本上，undefined组件意味着其父组件React是未定义的，因此您的服务器环境不支持React build pack或查看build script（webpack）配置。

Answer 3

我终于找到了问题。

文件和文件夹在服务器端混杂在一起，App.js放在错误的位置。因此，服务器甚至根本无法启动。该错误使我认为服务器已启动，但由于导入React而停止了。

无论如何，我重新整理了服务器的文件夹并重新启动了服务器。而且有效。

感谢您的帮助！

React无法读取未定义的属性“ Component”

3 个答案: