Question

我目前正在使用axis进行发布请求，但是传递到表单的数据没有更新。

我一直收到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处理程序并非旨在处理嵌套对象，因此我将您的状态展平，并在提交时，将状态构造为类似于发布所需的对象形状

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;

如何正确更新表单，与axios发布请求反应状态？

1 个答案: