ReactJS 通过 axios.post 从表单 select 发送数据

Question

我正在使用 SpringBoot API 使用 React 为我的“车队管理器”构建简单的 CRUD Web 应用程序。我坚持如何执行 axios.post 方法来添加汽车。下面 Car 组件的代码：

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.get(localhost:8080/car) 获得的数据：

{
    "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.get(localhost:8080/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
},

现在我要达到的目的是：在 Car 组件中用户提供必要的数据，从 Form.Control 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)

当我用 Form.Control type="text" 发送 companyId 时，它工作得很好。我应该怎么做才能发送名称来自 Form.Control as="select" 的 idCompany？

Answer 1

答案是：我试图将 company.name 作为 companyId 发送，解决方案是将 value={company.idCompany) 添加到

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

Answer 2

由于您正在链接 .then() 方法，它将 return 一个承诺。要解决这个问题，您有两个选择：

从 axios.post() 方法中删除“汽车”。如果您使用 Promise，则不应将“car”作为第二个参数传递。这是一个例子

axios.post("localhost:8080/car") .then(res => { 如果（res.data！=空）{ this.setState(this.initialState); alert("Samochód dodany pomyślnie"); } }).catch(e => console.log(e));
1. 将“Car”作为第二个参数传递并删除 Promise： axios.post("localhost:8080/car", car => { 如果（car.data！=空）{ this.setState(this.initialState); alert("Samochód dodany pomyślnie"); } })

ReactJS 通过 axios.post 从表单 select 发送数据

ReactJS sending data from Form select via axios.post

reactjs

react-bootstrap

axios