如何通过Axios POST请求正确更新React表单与状态？

嘿，我帮你找出了导致表单数据结构错误、POST请求返回404的几个核心问题，咱们一步步来解决：

问题分析 #

从你打印的state结果和代码来看，主要有这几个问题：

• onChange方法无法处理嵌套的address对象：你原来的onChange直接把[e.target.name]设为输入值，比如当输入框name是address时，会把state里的address对象直接替换成字符串（输入的街道地址），彻底破坏了原本的嵌套结构。
• 输入框的name/value属性混乱：
  • 多个输入框重复使用name="line_2"，导致onChange完全无法区分要更新哪个属性；
  • 部分输入框的value和name不匹配（比如城市输入框value是address['city']，但name却不是对应键）；
  • 你的state里address的键（比如state、zipcode）和后端预期的JSON键（region、postal）不匹配，导致提交的数据格式不符合要求。

解决方案 #

1. 修改onChange方法，支持嵌套对象更新 #

我们让onChange能识别并更新address里的子属性，通过给输入框的name设置成address.xxx的格式，拆分路径来更新嵌套对象：

onChange = (e) => {
  const { name, value } = e.target;
  
  // 处理address的子属性
  if (name.includes('address.')) {
    const [_, key] = name.split('.');
    this.setState(prevState => ({
      address: {
        ...prevState.address,
        [key]: value
      }
    }));
  } else {
    // 处理顶层属性（first_name、last_name）
    this.setState({ [name]: value });
  }
}

2. 修正state的address键，匹配预期JSON结构 #

把state里address的state改成region，zipcode改成postal，这样提交时直接用address就完全符合后端预期：

state = {
  first_name : '',
  last_name : '',
  address : {
    line_1: '',
    line_2: '',
    city: '',
    region: '', // 匹配预期的region字段
    postal: ''  // 匹配预期的postal字段
  }
}

3. 修正所有输入框的name和value属性 #

每个输入框的name要对应正确的属性路径，value要和state里的属性一一对应：

<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.line_1" placeholder='Street' value={address.line_1} onChange={this.onChange} />
<input type="text" name="address.line_2" placeholder='Apt number' value={address.line_2} onChange={this.onChange} />
<input type="text" name="address.city" placeholder='City' value={address.city} onChange={this.onChange} />
<input type="text" name="address.region" placeholder='State' value={address.region} onChange={this.onChange} />
<input type="text" name="address.postal" placeholder='Zipcode' value={address.postal} onChange={this.onChange} />

完整修改后的代码 #

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

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

  onChange = (e) => {
    const { name, value } = e.target;
    
    if (name.includes('address.')) {
      const [_, key] = name.split('.');
      this.setState(prevState => ({
        address: {
          ...prevState.address,
          [key]: value
        }
      }));
    } else {
      this.setState({ [name]: value });
    }
  }

  onSubmit = (e) => {
    e.preventDefault();
    const payload = { ...this.state };
    console.log('提交数据:', payload); // 现在结构和预期完全一致
    axios.post(`你的请求地址`, payload)
      .then((result) => {
        this.setState({ response: 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>Receive a free quote 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.line_1" placeholder='Street' value={address.line_1} onChange={this.onChange} />
              <input type="text" name="address.line_2" placeholder='Apt number' value={address.line_2} onChange={this.onChange} />
              <input type="text" name="address.city" placeholder='City' value={address.city} onChange={this.onChange} />
              <input type="text" name="address.region" placeholder='State' value={address.region} onChange={this.onChange} />
              <input type="text" name="address.postal" placeholder='Zipcode' value={address.postal} onChange={this.onChange} />
              <button className='button-sign-in'>Get Quote</button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

这样修改后，你在onSubmit里打印的state就会和预期的JSON结构完全一致，POST请求的数据格式符合后端要求，404问题应该就能解决啦（如果请求地址本身是正确的话）。

内容的提问来源于stack exchange，提问作者bruce