为什么我在 React JS 中使用 POST 方法获取请求时出现错误 415

Question

我正在尝试使用 API 添加客户。当我运行代码时，我收到类似这样的 415 错误 在浏览器控制台中发布 https://localhost:44387/api/Customers415 Customer.js:71。

这是我的代码。我有两个文件，一个是 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>
    )
}

}

Answer 1

我认为服务器期待不同的内容类型。 我看到你打电话给.setState({ user: result })。

但是您正在映射用户[] 状态。 我认为你需要做的是

fetch(apiUrl)
  .then(res => this.setState({ users: result}))
  .catch(err => this.setState({error : err}))