CODEWITHSUNDEEP
javascriptreactjsreact-reduxaxios
SYLVA
SYLVA

Reputation: 33

Why is my axios post request not sending data? I'm getting a response that means the fields are empty

I don't know why the data is not sending to the backend.

The API is working perfectly when I tested it on Insomnia. I have even added new users to the database using the API but when I try to add new users from react using redux and axios, it doesn't go instead I get a response saying the fields can't be empty.

I have tried to console.log all the data I'm sending and all the fields are populated properly. I don't know what I'm doing wrong.

I used express-validator for checking inputs as well as normal error handling that's why I get the response that filed is empty.

This is my code sending the data in redux

export const signin = data => dispatch => {

    const config = {
        method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json"
        },
        body : JSON.stringify(data)
    }

    console.log(config.body)

    axios(config)
    .then(res => dispatch({
        type : LOGIN_SUCCESS,
        payload : res.data
    }))
    .catch(err => {
        dispatch(error_msg(err.response.data, err.response.status))
        dispatch({
            type : LOGIN_FAIL
        })
    })
}

React Form component

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import AuthLayout from './AuthLayout'
import Layout from './Layout'
import {connect} from 'react-redux'
import {signin} from '../store/actions/authAction'
import axios from 'axios'

function SignIn({signin}) {

    const [value, setValue] = useState({
        email : '',
        password : ''
    })

    const handleChange = (e) => {
        setValue({
            ...value,
            [e.target.name] : e.target.value
        })
    }

    const handleSubmit = e => {
        e.preventDefault()

        const {email, password} = value

        const oldUser = {
            email,
            password
        }

        axios({method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json; charset=UTF-8",
            "Accept":"Token",
            "Access-Control-Allow-Orgin":"*",
        },
        body : JSON.stringify(oldUser)})
        .then(res => console.log(res.data))
        .catch(err => console.log(err.response.data))
        
    }

    return (
       <AuthLayout>
          <div className="form_container" style={bg}>
            <div className="form_title">
                <h2>Sign In</h2>
                
            </div>
            <form onSubmit={handleSubmit}>
                <div className="form_div">
                    <input type="text" placeholder="Enter Email" name="email" value={value.email} onChange={handleChange} />
                </div>
                <div className="form_div">
                    <input type="number" placeholder="Enter Password" name="password" value={value.password} onChange={handleChange} />
                </div>
                <div className="form_div form_btn">
                    <button>Submit</button>
                </div>
                <div className="form_div checkbox">
                    <input type="checkbox" />
                    <h4>Remember me</h4>
                </div>
            </form>
                <p>Don't have an account? <Link to="/signup"><span>Sign up</span></Link> </p>
                
          </div>
       </AuthLayout>
    )
}

const bg = {
    backgroundImage: 'url(image/Group1.svg)'
}

const mapStateToProps = state => {

    return{
        user : state.auth.user
    }
}



export default connect(mapStateToProps, {signin})(SignIn)

I didn't include the backend because is working very well.

Upvotes: 1

Views: 7777

Answers (3)

SYLVA
SYLVA

Reputation: 33

Thanks to everyone that has helped me to understand the problem, I appreciate all your effort.

I tried some of the solutions presented to me here but it didn't work.

So what I later did was to remove the body variable and replaced it with data in the config object and it started working.

This is the code:

export const signin = data => dispatch => {

    const config = {
        method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json",  
        },
        data : JSON.stringify(data)
    }

    console.log(config.data)

    axios(config)
    .then(res => dispatch({
        type : LOGIN_SUCCESS,
        payload : res.data
    }))
    .catch(err => {
        dispatch(error_msg(err.response.data, err.response.status))
        dispatch({
            type : LOGIN_FAIL
        })
    })
}

I don't know if is the best solution but in this context, it has worked for me.

Upvotes: 2

vodolaz095
vodolaz095

Reputation: 6986

JSON.stringify is not required here

body : JSON.stringify(data),

use

body: data,

because data is stringified in axious by itself, if you feed it already stringified data, you'll have extra escaped json that cannot be considered valid json as backend server

Upvotes: 1

Vijay Gangatharan
Vijay Gangatharan

Reputation: 298

This should be changed to fetch,

axios.post('url', 'body', 'headers')

the above is the actual structure of the Axios should be used.

Try the above.

Upvotes: 1

Related Questions