不发送带有 axios 的 post 请求以 react js 与 redux 形式（在 post 请求中不发送任何内容）

Question

我的问题是我要用 axios 发出一个 post 请求，需要将表单发送到后端，但是没有使用 post 请求发送任何东西，我使用 redux 表单来捕获和 axios 在后端发送表单和 flask。我看到了另一个答案，但没有用。

我正在使用 redux 作为应用程序的状态。

这是 redux 形式的代码：

    import React from 'react'
    import {Field,reduxForm} from 'redux-form'
    import {connect} from 'react-redux'
    import { showResults,showOneRestaurante}from '../../actions/actions'
    const SimpleForm=props=>{

      const {handleSubmit}=props;
      const onFormSubmit=(data)=>{            
        let id=data.idRestaurante;           
        var formData = new FormData();         

        formData.append('idRestaurante',id)           
        const config={
          headers: { 
            "Content-Type": "application/x-www-form-urlencoded"
          }           
        }

        showOneRestaurante(formData,config)
      }
      return (
        <form onSubmit={handleSubmit(onFormSubmit)}>
            <div>
                <label> Id Restaurante </label>
                      <Field
                          name='idRestaurante'
                          component='input'
                          type='text'
                          placeholder='ID  RESTAURANTE'
                      />               

            </div>        
            <button type='submit' > Submit </button>
        </form>
      )
    }

    export default connect(null)( reduxForm({
      form:'idRestautanres'
    })(SimpleForm));

这是axios代码的动作：

            import React from 'react'
            import axios from 'axios'                               
            import renderRestaurantesList from '../components/restaurantesLayout/allRestaurantes'
            import qs from 'qs'                
            export const SHOW_ONE_RESTAURANTE='SHOW_ONE_RESTAURANTE';          

            export function showOneRestaurante(formData,config){               
                return (dispatch)=>(                                                                 
                    axios({
                        method:'post',
                        url:"http://127.0.0.1:5000/obtenerRestaurante",                            
                        data:qs.stringify( formData)
                    }                        
                )
                    .then(response=>{
                        console.log('showone')
                        console.log(response)
                        dispatch({type:SHOW_ONE_RESTAURANTE,payload:renderRestaurantesList(response.data)})                            
                    })
                    .catch(function(err){
                        dispatch(<div>mal</div>)
                    })
                )   
            }

在最后的代码中，如果我使用 data:qs.stringify({idRestaurante:'4'}) 它会起作用，例如：

 axios({method:'post',
       url:"http://127.0.0.1:5000/obtenerRestaurante",
       data:qs.stringify({idRestaurante:'4'})
 }

改为使用： axios({方法:'post', url:"http://127.0.0.1:5000/obtenerRestaurante", data:qs.stringify( 表单数据) } 但显然我需要使用表单的特定数据，在我的后端我使用 flask，为了获得表单信息，我在 flask 中编写了下一个代码：

def GetRestaurante():

    if request.method=="POST":


        PidRestaurante = request.form['idRestaurante']

后台使用 postman 可以正常工作，正如我之前所说，在我的前端，只有当我使用代码 qs.stringify({idRestaurante:'4'}) 时，信息才会正确显示.

这是我在 stack overflow 中的第一个问题，非常感谢您很快得到答复:)。

Answer 1

const onFormSubmit=(data)=>{            
        data = { id: data.idRestaurante };
        const config={
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }           
        }

        showOneRestaurante(data,config)
      }

在 showOneRestaurante

axios({
       method:'post',
       url:"http://127.0.0.1:5000/obtenerRestaurante",
       data:qs.stringify(data),
 })

不发送带有 axios 的 post 请求以 react js 与 redux 形式（在 post 请求中不发送任何内容）

not sending a post request with axios in react js with redux form (sends nothing in post request)

reactjs

redux

redux-form

react-redux

axios