React中Fetch/axios POST请求失效，提交表单返回204无内容求助

看到你遇到了表单提交返回204的问题，我来帮你梳理下常见的原因和解决办法：

1. 先检查是否阻止了表单的默认提交行为 #

React里如果不阻止表单的默认提交，页面会自动刷新，导致请求被中断或者还没等服务器返回结果就跳转了，这时候很容易出现异常状态码。你的handleSubmit函数里一定要加上这行关键代码：

handleSubmit(e) {
  e.preventDefault(); // 必须阻止默认表单提交行为
  // 这里再写发送请求的逻辑
}

同时要确保表单的onSubmit绑定了这个处理函数：<form onSubmit={this.handleSubmit}>

2. 确认请求的数据格式和请求头是否正确 #

服务器对POST请求的格式通常有明确要求，数据格式和Content-Type请求头必须匹配：

用Fetch的正确写法 #

如果服务器接收JSON格式，要把state里的表单数据转成JSON字符串，同时设置对应请求头：

fetch('/api/records', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // 如果服务器需要认证，还要添加Authorization头，比如 `Authorization: Bearer ${yourToken}`
  },
  body: JSON.stringify(this.state) // 把表单数据序列化为JSON
})
.then(response => {
  if (response.status === 204) {
    // 204表示请求成功但服务器无内容返回，这时候可以认为提交成功
    console.log('记录提交成功！');
    // 这里可以重置表单状态
    this.setState({ name: '', phone: '', address: '' });
  } else {
    return response.json();
  }
})
.catch(error => console.error('请求出错:', error));

如果服务器要求x-www-form-urlencoded格式，就用URLSearchParams处理数据：

const formData = new URLSearchParams();
formData.append('name', this.state.name);
formData.append('phone', this.state.phone);
formData.append('address', this.state.address);

fetch('/api/records', {
  method: 'POST',
  body: formData
});

用Axios的正确写法 #

Axios会自动处理JSON序列化，直接传入state对象即可：

axios.post('/api/records', this.state, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (response.status === 204) {
    console.log('提交成功');
    this.setState({ name: '', phone: '', address: '' });
  }
})
.catch(error => console.error('请求错误:', error));

3. 检查服务器端的接收逻辑 #

204状态码本质是服务器成功处理了请求但没有返回内容，你可以从这几个方向排查：

• 查看服务器日志，确认是否真的接收到了表单数据（比如字段名拼写错误：name vs username）
• 确认服务器是否要求某些必填字段，你的state字段是否都符合要求
• 如果服务器需要身份认证，检查请求头里是否携带了正确的token或认证信息

4. 排查表单数据是否为空 #

如果你的state里所有字段都是空字符串，服务器可能因为没有有效数据可存储，处理后返回204。可以在发送请求前先做简单校验：

handleSubmit(e) {
  e.preventDefault();
  const { name, phone, address } = this.state;
  if (!name.trim() || !phone.trim() || !address.trim()) {
    alert('请填写完整的表单信息');
    return;
  }
  // 这里发送请求
}

补充：完整组件示例（参考） #

如果你的handleChange函数有问题，也会导致state没有正确更新，这里给一个完整的可参考示例：

class NewRecord extends Component {
  constructor(props) {
    super(props);
    this.state = { name: '', phone: '', address: '' };
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handlePhoneChange = this.handlePhoneChange.bind(this);
    this.handleAddressChange = this.handleAddressChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleNameChange(e) {
    this.setState({ name: e.target.value });
  }

  handlePhoneChange(e) {
    this.setState({ phone: e.target.value });
  }

  handleAddressChange(e) {
    this.setState({ address: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    const { name, phone, address } = this.state;
    if (!name.trim() || !phone.trim() || !address.trim()) {
      alert('请填写所有字段');
      return;
    }

    fetch('/api/records', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.state)
    })
    .then(response => {
      if (response.ok) {
        if (response.status === 204) {
          console.log('记录创建成功，服务器无返回内容');
          this.setState({ name: '', phone: '', address: '' });
        } else {
          return response.json().then(data => console.log('服务器返回数据:', data));
        }
      } else {
        throw new Error('请求失败，请检查服务器配置');
      }
    })
    .catch(error => console.error('请求错误:', error));
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>姓名:</label>
          <input type="text" value={this.state.name} onChange={this.handleNameChange} />
        </div>
        <div>
          <label>电话:</label>
          <input type="text" value={this.state.phone} onChange={this.handlePhoneChange} />
        </div>
        <div>
          <label>地址:</label>
          <input type="text" value={this.state.address} onChange={this.handleAddressChange} />
        </div>
        <button type="submit">提交记录</button>
      </form>
    );
  }
}

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