【发布时间】：2020-02-08 15:12:43
【问题描述】：
我想通过这个表单将数据发布到我的 API。但不幸的是，有一个服务器错误。有人能说出究竟是什么问题吗？ （我观察到没有为对象生成 id） 这是单击提交按钮后我在控制台中遇到的错误：
POST https://alert-amigo-api.herokuapp.com/products 500（内部 服务器错误）响应{type：“cors”，url： “https://alert-amigo-api.herokuapp.com/products”，重定向：假， 状态：500，确定：假，...} 类型：“cors”网址： “https://alert-amigo-api.herokuapp.com/products”重定向：假 status: 500 ok: false statusText: "Internal Server Error"
这是我的代码：
import React, { Component } from "react";
import { Link } from 'react-router-dom';
import { Form, FormControl, FormCheck } from 'react-bootstrap';
import { FormGroup, ControlLabel, Row, Button, Checkbox, Radio, HelpBlock } from "react-bootstrap";
function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
class Typography extends Component {
constructor() {
super();
this.state = {
productName: '',
productPrice: '',
productCategory: '',
productBrand: '',
countryOfOrigin: '',
riskType: '',
alertSubmittedBy: '',
yourCity: '',
yourAddress: '',
productImage: '',
description: ''
};
this.handleSubmit = this.handleSubmit.bind(this);
}
changeHandler = e => {
this.setState({[e.target.id]: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
console.log('The form was submitted with the following data:');
console.log(this.state);
fetch('https://alert-amigo-api.herokuapp.com/products',{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(this.state)
}).then(response => {
console.log(response)
})
.catch(error =>{
console.log(error)
});
}
render() {
return (
<div className="typoForm">
<form onSubmit={this.handleSubmit}>
<FieldGroup
id="productName"
name="productName"
type="text"
label="Product Name"
placeholder=""
value={this.state.productName}
onChange={this.changeHandler}
/>
<FieldGroup
id="productPrice"
name="productPrice"
type="number"
label="Product Price (in Euros)"
placeholder=""
value={this.state.productPrice}
onChange={this.changeHandler}
/>
<FormGroup controlId="productCategory" name="productCategory">
<ControlLabel>Category</ControlLabel>
<FormControl componentClass="select" name="productCategory" placeholder="select" onChange={this.changeHandler} value={this.state.selectValue}>
<option value="select">select the category to which the product belongs to</option>
<option value="electronics">Electronics</option>
<option value="cosmetics">Cosmetics</option>
<option value="apparels">Apparels</option>
<option value="footwear">Footwear</option>
<option value="accessories">Watches/Accessories</option>
<option value="handbags">Handbags/Wallets</option>
<option value="pharmaceuticals">Pharmaceuticals/Personal Care</option>
<option value="Toys">Toys</option>
</FormControl>
</FormGroup>
<FieldGroup
id="productBrand"
name="productBrand"
type="text"
label="Product Brand"
placeholder=""
value={this.state.productBrand}
onChange={this.changeHandler}
/>
<FieldGroup
id="countryOfOrigin"
name="countryOfOrigin"
type="text"
label="Country Of Origin"
placeholder=""
value={this.state.countryOfOrigin}
onChange={this.changeHandler}
/>
<FormGroup controlId="riskType" name="riskType">
<ControlLabel>Risk Type</ControlLabel>
<FormControl componentClass="select" placeholder="select" name="riskType" onChange={this.changeHandler} value={this.state.selectValue}>
<option value="select">select the level of risk</option>
<option value="high">high</option>
<option value="medium">medium</option>
<option value="low">low</option>
</FormControl>
</FormGroup>
<FormGroup controlId="alertSubmittedBy" name="alertSubmittedBy">
<ControlLabel>Alert Submitted By</ControlLabel>
<FormControl componentClass="select" onChange={this.changeHandler} name="alertSubmittedBy" placeholder="select" value={this.state.selectValue}>
<option value="select">select</option>
<option value="producers">producers</option>
<option value="consumers">consumers</option>
<option value="distributors">distributors</option>
</FormControl>
</FormGroup>
<FieldGroup
id="yourCity"
name="yourCity"
type="text"
label="Your City"
placeholder=""
value={this.state.yourCity}
onChange={this.changeHandler}
/>
<FormGroup controlId="yourAddress" name="yourAddress">
<ControlLabel>Your Address</ControlLabel>
<FormControl componentClass="textarea" name="yourAddress" onChange={this.changeHandler} value={this.state.value} placeholder="Enter your address here" />
</FormGroup>
<FieldGroup
id="productImage"
name="productImage"
type="file"
label="File"
value={this.state.value}
onChange={this.changeHandler}
help="Upload an image of the product."
/>
<FormGroup controlId="description" name="description">
<ControlLabel>Please mention the defaults of the product</ControlLabel>
<FormControl componentClass="textarea" name="description" onChange={this.changeHandler} value={this.state.value} placeholder="" />
</FormGroup>
<Button type="submit">Submit</Button>
</form>
</div>
);
}
}
export default Typography;
【问题讨论】：
标签： json reactjs api post http-status-code-505