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])，而不是等待它解决，因此您只剩下了承诺floating there。如果您不关心操作是成功还是失败，那很好，但是在大多数情况下，您要么要处理收到的错误，要么对结果进行处理。

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

Answer 2

哦！我知道了，我认为这个版本更好：

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

谢谢@jonrsharpe

行为异常，但可以正常工作，请给我一些解释

2 个答案: