行为不是预期的，但有效，我需要一些解释

Question

我正在使用钩子执行CRUD步骤，一切正常，但我不明白为什么Axios.post在这种情况下不需要.then。

如果我只发送customer而不是customer[0]，则什么都不发生，那么.then(response => console.log(response))什么都不返回。我想customer[0]已经有了正确的格式：[{}]。

import React, { useState, useEffect } from 'react';
import Axios from 'axios';
import { Form, Container, Col, Row, Button } from 'react-bootstrap';
// import data
import fields from './customerFields'; // <= array of object
function AddCustomers() {

const [customer, setCustomer] = useState([{}]);
const [inputValue, setInputValue] = useState('');
useEffect(() => {
setCustomer([inputValue]);
}, [inputValue]);
const handleSubmit = (event) => {
event.preventDefault();
const newCustomer = [...customer, inputValue];
setCustomer(newCustomer);
const url = 'http://localhost:5000/api/clients';

Axios.post(url, customer[0])
};
const handleChange = (event) => {
event.preventDefault();
const { value } = event.target;
const { name } = event.target;
const newValue = { ...inputValue, [name]: value };
setInputValue(newValue);
};
// return
return (
<Container>
<Row>
<Col className="col-form-label-sm">
<h3 id="">Identité du client</h3>
<Form
action=""
className="form-group"
onSubmit={(event) => handleSubmit(event)}
>
<Form.Group>
<Form.Label>{fields[0].label}</Form.Label>
<Form.Control
name={fields[0].name}
type="text"
value={inputValue.name}
onChange={(event) => handleChange(event)}
/>
</Form.Group>
<Form.Group>
<Form.Label>{fields[1].label}</Form.Label>
<Form.Control
name={fields[1].name}
type="text"
value={inputValue.name}
onChange={(event) => handleChange(event)}
/>
</Form.Group>
<Form.Group>
<Form.Label>{fields[2].label}</Form.Label>
<Form.Control
name={fields[2].name}
type="text"
value={inputValue.name}
onChange={(event) => handleChange(event)}
/>
</Form.Group>
<Button type="submit" variant="warning">
Ajouter un client
</Button>
</Form>
</Col>
</Row>
</Container>
);
}
export default AddCustomers;

Answer 1

您正在进行一个异步操作(Axios.post(url, customer[0])(，而不是等待它解决，所以您只是将promise留在那里。如果你不在乎操作是成功还是失败，那没关系，但在大多数情况下，你要么想处理收到的错误，要么对结果采取措施。

关于Axios.post之所以接受customer[0]，是因为它接受POST请求中可以发送的第二个参数中的任何内容。您总是将客户设置为一个数组，其中包含inputValue变量(setCustomer([inputValue]);(，因此inputValue就是您发送的customer[0]。

Answer 2

ohhh！我明白了，我认为这个版本更好：

const handleSubmit = (event) => {
event.preventDefault();
const url = 'http://localhost:5000/api/clients';
Axios.post(url, customer);
};

谢谢@jonrsharpe