Как правильно обновить форму, отреагировать на состояние с помощью почтового запроса axios?

Question

В настоящее время я делаю запрос на публикацию с использованием оси, но данные, которые я передаю в мою форму, не обновляются.

Я получаю сообщение об ошибке 404. Я думаю, что это может быть информация о форме неЯ не думаю, что моя логика верна, единственная проблема, которую я могу решить, это то, как я могу получить доступ к объекту адреса в моем состоянии или как осуществляется доступ к ключам в адресево входных тегах.

Вот как должно быть тело JSON POST:

{
    "first_name": "Craig",
    "last_name": "Williams",
    "address": {
        "line_1": "123 Mark Lane",
        "line_2": "3B",
        "city": "Brooklyn",
        "region": "NY",
        "postal": "41211"
    }
}

Текущий после заполнения формы Я консоль регистрирую состояние в onSubmit и это то, что регистрируется,Это неверно, это должно быть больше похоже на тело JSON.

{first_name: "Craig", 
last_name: "Williams", 
address: "123 Mark Lane", 
line_2: "41211"}

В настоящее время мой код выглядит так:

import React from 'react';
import axios from 'axios';


class App extends React.Component{
 state = {
        first_name : '',
        last_name : '',
        address : {
          line_1: '',
          line_2: '',
          city: '',
          state: '',
          zipcode: ''
        }
    }

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

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

    const {first_name,last_name,address} = this.state;
    console.log(address)
    axios.post(`website to hit`,{first_name,last_name,address})
      .then((result) => {

        this.setState({ result.data });
      }) .catch((error)=> {
           console.log(error);
     });
  }

render() {
    const { first_name, last_name, address } = this.state;
    return (
        <div className="App">
        <div className="left">
          <h1>Rocket Insurance</h1>
          <h1 className='p-left'>As interplanetary travel becomes mainstream </h1>
        </div>
        <div className="right">
        <h2>Recieve a free qoute today</h2>
         <div className="form">
         <form onSubmit={this.onSubmit}>
            <input
              type="text"
              name="first_name"
              placeholder='First Name'
              value={first_name}
              onChange={this.onChange}
            />
            <input
              type="text"
              name="last_name"
              placeholder='Last Name'
              value={last_name}
              onChange={this.onChange}
            />
            <input
              type="text"
              name="address"
              placeholder='Street'
              value={address['line_1']}
              onChange={this.onChange}
            />
              <input
              type="text"
              name="line_2"
              placeholder='Apt number'
              value={address['line_2']}
              onChange={this.onChange}
            />
              <input
              type="text"
              name="line_2"
              placeholder='City'
              value={address['city']}
              onChange={this.onChange}
            />
              <input
              type="text"
              name="line_2"
              placeholder='State'
              value={address['region']}
              onChange={this.onChange}
            />
              <input
              type="text"
              name="line_2"
              placeholder='zipcode'
              value={address['region']}
              onChange={this.onChange}
            />
            <button className='button-sign-in'>Log in</button>
          </form>
          </div>
         </div>
        </div>

    );
  }
}

export default App;

Answer 1

В должен решить вашу проблему. Ваши входные имена не соответствуют значениям состояния, которые вы пытались изменить. Однако ваш обработчик handleChange не был разработан для обработки вложенных объектов, поэтому я скорее сгладил ваше состояние и при отправке я структурировал состояние так, чтобы оно напоминало требуемую форму объекта для post

class Form extends React.Component {
  state = {
    first_name: "",
    last_name: "",
    line_1: "",
    line_2: "",
    city: "",
    state: "",
    zipcode: ""
  };

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

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

    const { first_name, last_name, ...address } = this.state;
    console.log({ first_name, last_name, address: { ...address } });
    // axios.post(`https://fed-challenge-api.sure.now.sh/api/v1/quotes`,{ first_name, last_name, address: { ...address } })
    //   .then((result) => {
    //     console.log("QUOTE:",result)
    //     this.setState({ result.data });
    //   }) .catch((error)=> {
    //        console.log(error);
    //  });
  };

  render() {
    const {
      first_name,
      last_name,
      zipcode,
      line_1,
      line_2,
      city,
      state
    } = this.state;
    return (
      <div className="App">
        <div className="left">
          <h1>Rocket Insurance</h1>
          <h1 className="p-left">
            As interplanetary travel becomes mainstream, we're excited to offer
            rocket owners comprehensive coverage options to let them fly through
            space worry-free{" "}
          </h1>
        </div>
        <div className="right">
          <h2>Recieve a free qoute today</h2>
          <div className="form">
            <form onSubmit={this.onSubmit}>
              <input
                type="text"
                name="first_name"
                placeholder="First Name"
                value={first_name}
                onChange={this.onChange}
              />
              <input
                type="text"
                name="last_name"
                placeholder="Last Name"
                value={last_name}
                onChange={this.onChange}
              />
              <input
                type="text"
                name="line_1"
                placeholder="Street"
                value={line_1}
                onChange={this.onChange}
              />
              <input
                type="text"
                name="line_2"
                placeholder="Apt number"
                value={line_2}
                onChange={this.onChange}
              />
              <input
                type="text"
                name="city"
                placeholder="City"
                value={city}
                onChange={this.onChange}
              />
              <input
                type="text"
                name="state"
                placeholder="State"
                value={state}
                onChange={this.onChange}
              />
              <input
                type="text"
                name="zipcode"
                placeholder="zipcode"
                value={zipcode}
                onChange={this.onChange}
              />
              <button className="button-sign-in">Log in</button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}
export default Form;