React中Redux Form+Axios发送POST请求无数据问题求助

Hey there, let's work through this issue step by step—missing form data in your Flask backend is a common gotcha, but we can track it down quickly. Let's break down the possible culprits and fixes:

1. Verify Redux Form is actually collecting your data #

First, let's confirm Redux Form is properly capturing values from your fields. Add a console.log in your form's submit handler to check if you're getting the data before sending it to Axios:

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { showResults } from '../../actions/yourActions';

class RestaurantForm extends React.Component {
  // Wrap submit logic with Redux Form's handleSubmit
  handleFormSubmit = (formValues) => {
    // Check if formValues has your expected data here!
    console.log('Form Values to send:', formValues);
    this.props.showResults(formValues);
  };

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(this.handleFormSubmit)}>
        {/* Ensure Field components have unique, correct `name` attributes */}
        <Field name="restaurantName" component="input" type="text" placeholder="Restaurant Name" />
        <Field name="cuisine" component="select">
          <option value="">Select Cuisine</option>
          <option value="italian">Italian</option>
          <option value="mexican">Mexican</option>
        </Field>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

// Critical: Assign a unique form name here
const ReduxFormWrapper = reduxForm({
  form: 'restaurantSubmissionForm'
})(RestaurantForm);

export default connect(null, { showResults })(ReduxFormWrapper);

If the console.log shows empty values, double-check your Field components' name attributes—they need to match the keys you expect in your form data. Also, make sure you're using Redux Form's handleSubmit to trigger submission (not a regular form submit handler).

2. Fix Axios Request Configuration #

Most often, missing data happens because Axios isn't sending data in a format Flask expects. Ensure you're setting the correct Content-Type header and passing data properly:

// In your actions file
import axios from 'axios';

export const showResults = (formData) => {
  return async (dispatch) => {
    try {
      // Confirm formData isn't empty here too
      console.log('Axios receiving form data:', formData);
      const response = await axios.post('/api/restaurants', formData, {
        headers: {
          'Content-Type': 'application/json' // Tells Flask to expect JSON data
        }
      });
      dispatch({ type: 'SUBMIT_SUCCESS', payload: response.data });
    } catch (err) {
      console.error('Request failed:', err.response?.data || err.message);
    }
  };
};

3. Ensure Flask is Receiving Data Correctly #

Flask handles JSON data differently than form-encoded data. If you're using request.form to fetch data, that's the problem—use request.get_json() instead:

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/restaurants', methods=['POST'])
def create_restaurant():
    # Use get_json() to parse JSON payloads
    incoming_data = request.get_json(force=True) # force=True handles missing Content-Type (but fix the header first!)
    print('Received data from frontend:', incoming_data)
    
    if not incoming_data:
        return jsonify({'error': 'No data received'}), 400
    
    # Your backend logic here
    return jsonify({'status': 'success', 'data': incoming_data}), 201

Quick Debugging Checklist #

• Check Browser Network Tab: Go to Chrome DevTools → Network → Find your POST request. Look at the "Payload" tab—if no data appears here, the issue is in Redux Form. If data exists but Flask doesn't get it, the problem is in backend parsing.
• Redux DevTools: Use Redux DevTools to check if form data is stored in the Redux state under form.restaurantSubmissionForm.values.
• Avoid Encoding Conflicts: If you accidentally set Content-Type to application/x-www-form-urlencoded, Flask would expect request.form instead—stick to JSON for consistency.

Let me know if any of these steps resolve your issue, or if you need to share more code snippets!

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