reactjs - 为什么我在 React JS 中使用 POST 方法获取请求时出现错误 415
问题描述
我正在尝试使用 API 添加客户。当我运行代码时,我在浏览器控制台中收到类似 POST https://localhost:44387/api/Customers 415 Customer.js:71 的 415 错误。
这是我的代码。我有两个文件,一个是 Customer,第二个是 AddCustomer,它是表单。
客户JS
import React from 'react';
import { Table, Button } from 'semantic-ui-react';
import AddCustomer from './AddCustomer';
export default class Customer extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
users: []
}
this.onAddFormSubmit = this.onAddFormSubmit.bind(this);
}
//fetch data
componentDidMount() {
const customerApi = 'https://localhost:44387/api/Customers';
const myHeader = new Headers();
myHeader.append('Content-type', 'application/json');
myHeader.append('Accept', 'application/json');
myHeader.append('Origin','https://localhost:44387');
const options = {
method: 'GET',
myHeader
};
fetch(customerApi, options)
.then(res => res.json())
.then(
(result) => {
this.setState({
users: result,
isLoaded: true
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
onAddFormSubmit(data) {
const customerApi = 'https://localhost:44387/api/Customers';
const myHeader = new Headers();
const options = {
method: 'POST',
myHeader: {
'Accept': 'application/json, text/plain',
'Content-Type': 'application/json;charset=UTF-8'
},
body: {
"name":"Rahul",
"address":"102 Hobson Street"
}
};
fetch(customerApi, options)
.then(res => res.json())
.then(
(result) => {
this.setState({
user:result
})
},(error) => {
this.setState({ error });
}
)
}
render() {
const { users } = this.state;
return (
<div>
<AddCustomer onAddFormSubmit = {this.onAddFormSubmit}/>
<h3>hello{JSON.stringify(this.state.fields)}</h3>
<Table celled textAlign='center'>
<Table.Header>
<Table.Row>
<Table.HeaderCell>ID</Table.HeaderCell>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Address</Table.HeaderCell>
<Table.HeaderCell>Action</Table.HeaderCell>
<Table.HeaderCell>Action</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body >
{
users.map(user => (
<Table.Row key={user.customerId}>
<Table.Cell>{user.customerId}</Table.Cell>
<Table.Cell>{user.name}</Table.Cell>
<Table.Cell>{user.address}.Address</Table.Cell>
<Table.Cell>
<Button color='yellow'>Edit</Button>
</Table.Cell>
<Table.Cell>
<Button color='red'>Delete</Button>
</Table.Cell>
</Table.Row>
))
}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan='5'>
No of Pages
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
</div>
)
}
}
当我打开添加客户表单并点击提交按钮时,它在获取时出现错误。我究竟做错了什么?
添加客户 JS
import React from 'react';
import { Button, Form, Modal } from 'semantic-ui-react';
export default class Customer extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.initialState = {
name: '',
address: ''
};
this.state = this.initialState;
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const name = event.target.name;
const value = event.target.value;
this.setState({
[name]:value,
})
}
handleSubmit(event) {
event.preventDefault();
this.props.onAddFormSubmit(this.state);
this.setState(this.initialState);
}
//On cancel button click close Create user form
closeCreateForm = () => {
this.setState({ })
}
//Open Create new Customer form
openCreateCustomer = () => {
this.setState({ })
}
render() {
return (
<div>
<Modal closeOnTriggerMouseLeave={false} trigger={
<Button color='blue' onClick={this.openCreateCustomer}>
New Customer
</Button>
} open={this.state.showCreateForm}>
<Modal.Header>
Create customer
</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>Name</label>
<input type="text" placeholder ='Name' name = "name"
value = {this.state.name}
onChange = {this.handleChange}/>
</Form.Field>
<Form.Field>
<label>Address</label>
<input type="text" placeholder ='Address' name = "address"
value = {this.state.address}
onChange = {this.handleChange}/>
</Form.Field>
<br/>
<Button type='submit' floated='right' color='green'>Create</Button>
<Button floated='right' onClick={this.closeCreateForm} color='black'>Cancel</Button>
<br/>
</Form>
</Modal.Content>
</Modal>
</div>
)
}
}
解决方案
我认为服务器期望不同的内容类型。我看到你在打电话.setState({ user: result })
。
但是您正在映射用户 [] 状态。我认为你需要做的是
fetch(apiUrl)
.then(res => this.setState({ users: result}))
.catch(err => this.setState({error : err}))
推荐阅读
- c - 关于 C 结构中某种类型元素的问题
- excel - 找到基因的确切基因列表并返回 1
- android - 如何将 Socket (Messenger) 添加到后台
- c# - 如何使用 C# 检测从浏览器拖入 WPF 文本框的 URL
- java - 使用拆分 JAVA 解析字符串
- heroku - 不支持 cookie 的应用程序的 heroku session-affinity
- javascript - 如何在 React Native 中使用 StencilJs 组件
- c - 即使在释放内存时也会出现堆溢出
- java - 我在域控制器运行时更新了 domain.xml - wildfly
- php - PHP - 从 stdObject 中查找额外/缺失的类变量