我正在用springbootapi为我的“车队管理器”构建简单的crudweb应用程序。我一直在学习如何执行axios。post添加汽车的方法。以下汽车部件的代码：

import React, { Component} from 'react';
import { Button, Card, Form, Col } from 'react-bootstrap'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSave , faUndo} from '@fortawesome/free-solid-svg-icons';
import axios from 'axios';

class Car extends Component {

    constructor(props) {
        super(props);
        this.state = this.initialState;
        this.carChange = this.carChange.bind(this);
        this.submitCar = this.submitCar.bind(this);
    }

    initialState = {
        carBrand:'', 
        carModel:'', 
        carManufactureYear:'', 
        carType:'', 
        engineCapacity:'', 
        enginePower:'', 
        plateNumber:'', 
        isTaken:'', 
        companyId:'', 
        companies: []
    }

    componentDidMount() {
        axios.get('localhost:8080/company')
            .then(res => {
                const companies = res.data;
                this.setState({companies});
                console.log(res.data);
            })
    }

    submitCar = e => {
        e.preventDefault();

        const car = {
            carBrand: this.state.carBrand,
            carModel: this.state.carModel,
            carManufactureYear: this.state.carManufactureYear,
            carType: this.state.carType,
            engineCapacity: this.state.engineCapacity,
            enginePower: this.state.enginePower,
            plateNumber: this.state.plateNumber,
            isTaken: this.state.isTaken,
            companyId: this.state.companyId
        };

        axios.post("localhost:8080/car", car)
            .then(res => {
               if (res.data != null) {
                   this.setState(this.initialState);
                   alert("Samochód dodany pomyślnie");
               }
            });

    }

    carChange = e => {
        this.setState({
        [e.target.name]:e.target.value
        });
    }

    resetCar = () => {
        this.setState(() => this.initialState)
    }

    render(){
        const {
            carBrand, 
            carModel, 
            carManufactureYear, 
            carType, 
            engineCapacity, 
            enginePower, 
            plateNumber, 
            isTaken, 
            companyId
    } = this.state;

        return(
            <Card className={"border border-dark bg-dark text-white"}>
                <Card.Header>Add a car</Card.Header>
                <Form onReset={this.resetCar} onSubmit={this.submitCar} id="carFormId">
                    <Card.Body>
                            <Form.Row>
                                <Form.Group as={Col} controlId="formGridBrand">
                                    <Form.Label>Car brand</Form.Label>
                                    <Form.Control required autoComplete="off"
                                        type="text" name="carBrand"
                                                  value={carBrand}
                                                  onChange={this.carChange}
                                        className={"bg-dark text-white"}
                                        placeholder="Put car brand" />
                                </Form.Group>
                                <Form.Group as={Col} controlId="formGridModel">
                                    <Form.Label>Car model</Form.Label>
                                    <Form.Control required autoComplete="off"
                                        type="text" name="carModel"
                                                  value={carModel}
                                                  onChange={this.carChange}
                                        className={"bg-dark text-white"}
                                        placeholder="Put car model" />
                                </Form.Group>
                            </Form.Row>

                            // Other inputs for rows

                    </Card.Body>
                    <Card.Footer style={{"textAlign":"right"}}>
                        <Button variant="success" type="submit">
                            <FontAwesomeIcon icon={faSave}/> Wyślij
                        </Button> {' '}
                        <Button variant="danger" type="reset">
                            <FontAwesomeIcon icon={faUndo}/> Reset
                        </Button>
                    </Card.Footer>
                </Form>
            </Card>
        );
    }
}

export default Car;

这是我从axios获得的数据。获取（本地主机：8080/车）：

{
    "idCar": 1,
    "carBrand": "Skoda",
    "carModel": "Fabia",
    "carManufactureYear": 1999,
    "carType": "Cieżarowy",
    "engineCapacity": "2.4",
    "enginePower": "105",
    "plateNumber": "WW 0017Y",
    "isTaken": 0,
    "company": {
        "idCompany": 1,
        "name": "KFC",
        "nip": "5260211104",
        "address": {
            "idAddress": 1,
            "country": "Polska",
            "zipCode": "82-300",
            "city": "Elbląg",
            "street": "Płk. Dąbka",
            "buildingNumber": "152"
        },
    "addressId": null
    },
    "companyId": null
},

和来自axios的数据。获取（本地主机：8080/公司）：

{
    "idCompany": 1,
    "name": "KFC",
    "nip": "5260211104",
    "address": {
        "idAddress": 1,
        "country": "Polska",
        "zipCode": "82-300",
        "city": "Elbląg",
        "street": "Płk. Dąbka",
        "buildingNumber": "152"
    },
    "addressId": null
},

现在我想要达到的是：在Car组件中，用户提供必要的数据，从表单中选择公司。控件as=“select”以其名称表示

{this.state.companies.map(company =>
     <option key={company.idCompany}>{company.idCompany}</option> )}

当我通过axios.post方法发送此数据时，它会给我这样的错误：

xhr.js:177 POST localhost:8080/car/ 500

Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

当我发送带有表单的companyId时。控件type=“text”它工作得非常好。我应该怎么做才能从表单中发送带有名称的idCompany。控件as=“选择”？