【发布时间】：2019-03-20 15:18:25
【问题描述】：
我尝试向我的编辑数据表单添加验证，但在尝试实施后我遇到了问题。在输入字段中，您可以看到当前数据的样子 example ==> model = "Crawler" 但是如果我想编辑这些数据让我们说“Walker”并且我想删除 crawler 并输入 walker 它不会工作它保持爬行，您无法擦除它。这很奇怪，因为在我更改代码以实现验证之前，它运行良好。
我的代码（“评论中的代码是我验证前使用的函数”）
import * as React from 'react';
import { Link } from 'react-router-dom';
import { getDetail, update } from '../../services/vehicles.service';
export class VehicleEdit extends React.Component {
constructor(props) {
super(props);
const vehicleId = props.match.params.name;
this.state = {
vehicle: {},
errors: {}
};
this.handleChange = this.handleChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
getDetail(vehicleId).then((response) => {
this.setState({
vehicle: response.message,
});
});
}
/* updateManufacturer(manufacturer) {
this.setState({
vehicle: {
...this.state.vehicle,
manufacturer,
},
});
}
updateModel(model) {
this.setState({
vehicle: {
...this.state.vehicle,
model,
},
});
}
updateCostInCredits(cost_in_credits) {
this.setState({
vehicle: {
...this.state.vehicle,
cost_in_credits,
},
});
}
updateLength(length) {
this.setState({
vehicle: {
...this.state.vehicle,
length,
},
});
}
updateMaxAtmosperingSpeed(max_atmosphering_speed) {
this.setState({
vehicle: {
...this.state.vehicle,
max_atmosphering_speed,
},
});
}
updateCrew(crew) {
this.setState({
vehicle: {
...this.state.vehicle,
crew,
},
});
}
updatePassengers(passengers) {
this.setState({
vehicle: {
...this.state.vehicle,
passengers,
},
});
}
updateVehicleClass(vehicle_class) {
this.setState({
vehicle: {
...this.state.vehicle,
vehicle_class,
},
});
}*/
handleChange(e) {
let vehicle = this.state.vehicle;
vehicle[e.target.name] = e.target.value;
this.setState({
vehicle
});
}
onSubmit = (e) => {
e.preventDefault();
if (this.validateForm()) {
let vehicle = {};
vehicle["model"] = "";
vehicle["manufacturer"] = "";
vehicle["cost_in_credits"] = "";
vehicle["max_atmosphering_speed"] = "";
vehicle["crew"] = "";
vehicle["passengers"] = "";
vehicle["vehicle_class"] = "";
this.setState({ vehicle: vehicle });
update(this.state.vehicle.name, this.state.vehicle).then((response) => {
this.props.history.push('/vehicles');
});
alert("Form submitted");
}
}
validateForm() {
let vehicle = this.state.vehicle;
let errors = {};
let formIsValid = true;
if (!vehicle["model"]) {
formIsValid = false;
errors["model"] = "*Please enter a model type.";
}
if (!vehicle["manufacterer"]) {
formIsValid = false;
errors["emailid"] = "*Please enter a manufacterer.";
}
if (!vehicle["cost_in_credits"]) {
formIsValid = false;
errors["cost_in_credits"] = "*Please enter cost in credits.";
}
if (!vehicle["length"]) {
formIsValid = false;
errors["length"] = "*Please enter a length.";
}
if (!vehicle["max_atmosphering_speed"]) {
formIsValid = false;
errors["max_atmosphering_speed"] = "*Please enter max atmosphering speed.";
}
if (!vehicle["crew"]) {
formIsValid = false;
errors["crew"] = "*Please enter crew count.";
}
if (!vehicle["passengers"]) {
formIsValid = false;
errors["passengers"] = "*Please enter passengers count.";
}
if (!vehicle["vehicle_class"]) {
formIsValid = false;
errors["vehicle_class"] = "*Please enter vehicle class.";
}
this.setState({
errors: errors
});
return formIsValid;
}
render() {
return (
<div className="margin-left">
{(this.state.vehicle.name) ? (
<form onSubmit={this.onSubmit}>
<h1>{this.state.vehicle.name}</h1>
<div>
<label >Model: </label><br />
<input type="text" name="model" id="model" value={this.state.vehicle.model} onChange={(e) => this.handleChange(e.target.value)} />
<div className="errorMsg">{this.state.errors.model}</div>
</div>
<div>
<label >Manufacturer: </label><br />
<input type="text" name="manufacturer" id="manufacturer" value={this.state.vehicle.manufacturer} onChange={this.handleChange} />
<div className="errorMsg">{this.state.errors.manufacturer}</div>
</div>
<div>
<label >Cost in credits: </label><br />
<input type="text" name="cost_in_credits" id="cost_in_credits" value={this.state.vehicle.cost_in_credits} onChange={this.handleChange} />
<div className="errorMsg">{this.state.errors.cost_in_credits}</div>
</div>
<div>
<label >Length: </label><br />
<input type="text" name="length" id="length" value={this.state.vehicle.length} onChange={this.handleChange} />
<div className="errorMsg">{this.state.errors.length}</div>
</div>
<div>
<label >Max atmosphering speed: </label><br />
<input type="text" name="max_atmosphering_speed" id="max_atmosphering_speed" value={this.state.vehicle.max_atmosphering_speed} onChange={this.handleChange} />
<div className="errorMsg">{this.state.errors.max_atmosphering_speed}</div>
</div>
<div>
<label >Crew: </label><br />
<input type="text" name="crew" id="crew" value={this.state.vehicle.crew} onChange={this.handleChange} />
<div className="errorMsg">{this.state.errors.crew}</div>
</div>
<div>
<label >Passengers: </label><br />
<input type="text" name="passengers" id="passengers" value={this.state.vehicle.passengers} onChange={this.handleChange} />
<div className="errorMsg">{this.state.errors.passengers}</div>
</div>
<div>
<label >Vehicle class: </label><br />
<input type="text" name="vehicle_class" id="vehicle_class" value={this.state.vehicle.vehicle_class} onChange={this.handleChange} />
<div className="errorMsg">{this.state.errors.vehicle_class}</div>
</div>
<br />
<button className="btn btn-outline-success" >Save changes</button>
<Link className="btn btn-danger" to={`/vehicles/${this.state.vehicle.name}`}>Back </Link>
</form>
) : (<p>Loading student details...</p>)}
</div>
);
}
}
export default VehicleEdit;
有人能看出我哪里出错了吗？因为我没看到
----------- 更新车辆服务脚本 数据从这里发送到我的 api
export const update = (name, vehicle, vehicles) => fetch(`${url}/vehicles/${name}/edit`, {
method: 'PUT',
body: JSON.stringify(vehicle),
mode: 'cors',
headers: new Headers({
'Content-Type': 'application/json',
})
}).then((response) => {
if(response.statusText === 'OK') {
return response.json();
}
throw new Error('Something went wrong UPDATING vehicle with name' + name);
});
-----> 我的 api 中的更新函数
app.put('/vehicles/:name/edit', (req, res) => {
let vehicle = null;
console.log('update vehicle', [req.body]);
if (vehicles[0] && vehicles[0].length) {
vehicle = vehicles[0].filter((vehicle) => ('' + vehicle.name) === req.params.name);
}
if (vehicle) {
vehicles = vehicles[0].map((s) => {
return ('' + s.name) === req.params.name ? vehicles.push[req.body] : s;
})
res.send({
status: config.STATUS.OK,
message: [req.body],
});
} else {
res.send({
status: config.STATUS.ERROR,
message: 'Could not find vehicle for update',
});
}
});
【问题讨论】：