поведение не ожидается, но работает, мне нужно объяснение, пожалуйста - PullRequest
Новая
       93

поведение не ожидается, но работает, мне нужно объяснение, пожалуйста

0 голосов
/ 08 июля 2020

Я нахожусь на этапе 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;

Ответы [ 2 ]

0 голосов
/ 08 июля 2020

оххх! Получил, думаю эта версия лучше: 

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

спасибо @ jonrsharpe

0 голосов
/ 08 июля 2020

Вы выполняете асинхронную операцию (Axios.post(url, customer[0])) и не ждете, пока она разрешится, поэтому вы просто оставляете обещание плавающим там . Если вам все равно, будет ли операция успешной или неудачной, это нормально, но в большинстве случаев вы хотите либо обработать полученную ошибку, либо что-то сделать с результатом.

О том, почему Axios.post принимает customer[0] это потому, что он принимает все, что указано во втором параметре, он может отправить в запросе POST. Вы всегда устанавливаете своего клиента как массив с переменной inputValue внутри (setCustomer([inputValue]);), поэтому inputValue - это то, что вы отправляете как customer[0].

...