Блог

я пытаюсь отправить некоторые данные в свою базу данных на 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)

  

Я пытался изменить babel, но я действительно не знаю, что происходит

Далее я собираюсь поместить компонент, действия и редукторы

AddVehicle:

 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 axios from 'axios'
import regeneratorRuntime from "regenerator-runtime";
import {
    CHANGE_NAME,
    CHANGE_MODEL,
    CHANGE_BRAND,
    CHANGE_LICENSEPLATE, 
    UPLOAD_VEHICLE,
    LOADING
} from '../reducers/types/vehiclesTypes'
const axiosConfig = {
    baseURL: 'http://localhost:3000/'
}
export const changeName = (name) => (dispatch) => {
    dispatch({
        type: CHANGE_NAME,
        payload: name
    })
};
export const changeModel = (model) => (dispatch) => {
    dispatch({
        type:CHANGE_MODEL ,
        payload: model
    })
};
export const changeBrand = (brand) => (dispatch) => {
    dispatch({
        type:CHANGE_BRAND ,
        payload: brand
    })
};
export const changeLicenseplate = (licenseplate) => (dispatch) => {
    dispatch({
        type: CHANGE_LICENSEPLATE,
        payload: licenseplate
    })
};

export const uploadingData= (new_vehicle) => async (dispatch) => {
    dispatch({
        type: LOADING
    })
    try {
        await axios.post('/api/vehicles/addone',new_vehicle, axiosConfig);
        dispatch({
            type: UPLOAD_VEHICLE
        })
    } catch (error) {
        console.log(error)
    }
    console.log(new_vehicle)
}
  

Редуктор: vehiclesReducers:

 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;
  

У меня также была эта проблема, когда я обновил метод класса, чтобы включить async / await в мое приложение React. Решение, которое я нашел (вдохновленный https://stephencharlesweiss.com/regenerator-runtime-not-defined /) состоял в том, чтобы импортировать пакет @babel /plugin-transform-runtime NPM и ссылаться на него в моем файле Webpack в качестве плагина через plugins: ['@babel/plugin-transform-runtime'] . При таком подходе мне не нужно было использовать оператор import regeneratorRuntime , как я видел, что другие делают, чтобы обойти эту проблему. Вот фрагмент из моего файла Webpack:

 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']
                        }
                    }]
                },
                ...