我试图将一些数据发送到我的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);
操作车辆（Action vehicles）操作：
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)
}
Reducer: 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;
options:...添加到'babel-loader'下面对我也起作用了。但是，由于插件未安装，我需要先调用npm install --save-dev @babel/plugin-transform-runtime。 - Ernst Plesiutschnig