我试图在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)
我尝试过修改通天塔,但我真的不知道发生了什么
下一步,我将放置组件,动作和简化器
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)
}
减速器:车辆减速器:
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;
答案 0 :(得分:6)
当我更新类的方法以在我的React应用程序中包含async / await时,我也遇到了这个问题。我发现的解决方案(受https://stephencharlesweiss.com/regenerator-runtime-not-defined/启发)是导入@ babel / plugin-transform-runtime NPM软件包,并通过plugins: ['@babel/plugin-transform-runtime']
在Webpack文件中将其作为插件引用。使用这种方法,我不必为regeneratorRuntime
使用import语句,因为我已经看到其他人确实解决了这个问题。这是我的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']
}
}]
},
...