Javascript 未捕获引用错误：未定义regeneratorRuntime

我试图在mongo上向我的数据库发送一些数据，但当我按下添加按钮时，这个按钮不会发送任何数据，并抛出此错误

 Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (vehiclesActions.js:76)
    at Object.uploadingData (vehiclesActions.js:114)
    at Object.eval [as uploadingData] (redux.js:485)
    at eval (AddVehicle.jsx:85)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
react-dom.development.js:327 Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (vehiclesActions.js:76)
    at Object.uploadingData (vehiclesActions.js:114)
    at Object.eval [as uploadingData] (redux.js:485)
    at eval (AddVehicle.jsx:85)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)

我试过修改巴别塔，但我真的不知道发生了什么

下一步，我要把组件，行动和减速器

添加车辆：

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import * as vehiclesActions from '../../actions/vehiclesActions'
import '../../assets/styles/components/AddVehicle.scss'
class AddVehicle extends Component {

    changingName = (event) => {
        this.props.changeName(event.target.value);
    }

    changingModel = (event) => {
        this.props.changeModel(event.target.value);
    }

    changingBrand = (event) => {
        this.props.changeBrand(event.target.value);
    }

    changingLicenseplate = (event) => {
        this.props.changeLicenseplate(event.target.value);
    }

    saving = (event) => {
        event.preventDefault();
        const { name, model, brand, licenseplate } = this.props.vehicle;
        const newVehicle = {
            name: name,
            model: model,
            brand: brand,
            licenseplate: licenseplate
        }
        this.props.uploadingData(newVehicle)
    }


    render() {
        console.log(this.props.vehicle.name)
        return (
            <div className="contenedor">
                <div className="container__data">
                    <Link
                        to="/dashboard"
                        style={{
                            width: "150px",
                            borderRadius: "3px",
                            letterSpacing: "1.5px",
                            marginTop: "1rem"
                        }}
                        className="btn btn-small waves-effect waves-light hoverable blue accent-3 container__data--button-home"
                    >
                        Home
                    </Link>
                    <a
                        style={{
                            width: "150px",
                            borderRadius: "3px",
                            letterSpacing: "1.5px",
                            marginTop: "1rem"
                        }}
                        className="btn btn-small waves-effect waves-light hoverable blue accent-3 container__data--button-upload"
                    >
                        upload
                    </a>
                    <input type="file" className=" container__data--input-upload" placeholder="Add Files" />
                </div>
                <form className="container__form" noValidate autoComplete="off" onSubmit={this.onsubmit}>
                    <div>
                        <input type="text"
                            placeholder="name"
                            onChange={this.changingName}
                            value={this.props.vehicle.name}
                        />
                        <input type="number"
                            placeholder="model"
                            onChange={this.changingModel}
                            value={this.props.vehicle.model}

                        />
                        <input type="text"
                            placeholder="brand"
                            onChange={this.changingBrand}
                            value={this.props.vehicle.brand}

                        />
                        <input type="text"
                            placeholder="licenseplate"
                            onChange={this.changingLicenseplate}
                            value={this.props.vehicle.licenseplate}
                        />
                    </div>

                    <button
                        style={{
                            width: "150px",
                            borderRadius: "3px",
                            letterSpacing: "1.5px",
                            marginTop: "1rem"
                        }}
                        onClick={this.saving}
                        className="btn btn-small waves-effect waves-light hoverable blue accent-3 container__"
                    >
                        Add
                    </button><br />
                    <a
                        style={{
                            width: "150px",
                            borderRadius: "3px",
                            letterSpacing: "1.5px",
                            marginTop: "1rem",
                        }}
                        className="btn btn-small m3 waves-effect waves-light hoverable red accent-3 container__"
                    >
                        Delete
                    </a>
                </form>
            </div>
        );
    }
}

const mapStateToProps = (reducer) => {
    return {
        vehicle: reducer.vehiclesReducer
    }
}

export default connect(mapStateToProps, vehiclesActions)(AddVehicle);

减速器：车辆减速器：

import { CHANGE_BRAND, CHANGE_LICENSEPLATE, CHANGE_MODEL, CHANGE_NAME, UPLOAD_VEHICLE, LOADING } from './types/vehiclesTypes'

const initialState = {
    vehicle: {},
    name: '',
    model: '',
    brand: '',
    licenseplate: '',
    loading: false
}

const vehiclesReducer = (state = initialState, action) => {
    switch (action.type) {
        case LOADING:
            return {
                ...state,
                loaging: true
            };
        case UPLOAD_VEHICLE:
            return {
                ...state,
                vehicles: {},
                name: '',
                model: '',
                brand: '',
                licenseplate: '',
                loading: false

            }
        case CHANGE_NAME:
            return {
                ...state,
                name: action.payload
            }
        case CHANGE_MODEL:
            return {
                ...state,
                model: action.payload
            }
        case CHANGE_BRAND:
            return {
                ...state,
                brand: action.payload
            }
        case CHANGE_LICENSEPLATE:
            return {
                ...state,
                licenseplate: action.payload
            }
        default:
            return state;
    }
}


export default vehiclesReducer;

---

当我更新一个类的方法以在我的React应用程序中包含async/await时，我也遇到了这个问题。我发现的解决方案（灵感来源）是导入@babel/plugin transform runtime NPM包，并通过

插件：['@babel/plugin transform runtime']

在我的网页文件中将其作为插件引用。通过这种方法，我不必像其他人那样为

registratorruntime

使用导入语句来回避这个问题。以下是我的网页文件中的一个片段：

module.exports = options => {
    return {
        module: {
            rules: [
                // React App Setup
                {
                    test: /.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                            plugins: ['@babel/plugin-transform-runtime']
                        }
                    }]
                },
                ...

---

当我更新一个类的方法以在我的React应用程序中包含async/await时，我也遇到了这个问题。我发现的解决方案（灵感来源）是导入@babel/plugin transform runtime NPM包，并通过

插件：['@babel/plugin transform runtime']

在我的网页文件中将其作为插件引用。通过这种方法，我不必像其他人那样为

registratorruntime

使用导入语句来回避这个问题。以下是我的网页文件中的一个片段：

module.exports = options => {
    return {
        module: {
            rules: [
                // React App Setup
                {
                    test: /.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                            plugins: ['@babel/plugin-transform-runtime']
                        }
                    }]
                },
                ...

---

非常感谢@P Walker。你救了我一天。非常感谢@P Walker。你救了我一天。谢谢@P Walker，在

“babel-loader”

下面添加了

选项：…

，这对我也很有用。但是，我需要先调用

npm安装--save dev@babel/plugin transform runtime

，因为插件没有安装。谢谢@P Walker，在

'babel-loader'

下面添加

选项：…

对我也很有效。但是，我需要先调用

npm安装--save dev@babel/plugin transform runtime

，因为插件没有安装。