The response from a post request in Reactjs using axios is coming back empty

Question

The response from a post request in Reactjs using axios is coming back empty

When working on my Reactjs app, I am using axios.post() to edit a mysql database on the backend. The data is successfully sent through the post request to the backend. However, I am facing an issue where I need to determine when the post request has finished and receive some data from it to ensure that the backend code executed correctly. Below is the code snippet I've tried, with newEdit being an object containing necessary information for the backend:

axios
 .post('http://ip:3001/edit_table', newEdit)
 .then((response) => { 
     console.log("response: ", response);
 }, (error) =>{
     console.log("error: ", error);
 });

Despite the successful transfer of the object to the nodejs file, neither of the console log statements are executed. I am unable to get any type of response. Can anyone help me troubleshoot this issue? Thank you.

node.js reactjs axios

Answer 1

Answer №1

If your backend code is functioning correctly and returning a response, you can use the example below to update data seamlessly.

const updateData = async () => {
            try {
                const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
                    method: 'PUT',
                    body: JSON.stringify({
                        id: id,
                        title: post.title,
                        body: post.body,
                        userId: 1
                    }),
                    headers: {
                        "Content-type": "application/json; charset=UTF-8"
                    }
                })
                    .then(response => response.json())
                    .then(json => console.log(json));
                console.warn(response.data);
            } catch (error) {
                console.warn(error);
            }
        };

Answer 2

If your backend code is functioning correctly and returning a response, you can use the example below to update data seamlessly.

const updateData = async () => {
            try {
                const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
                    method: 'PUT',
                    body: JSON.stringify({
                        id: id,
                        title: post.title,
                        body: post.body,
                        userId: 1
                    }),
                    headers: {
                        "Content-type": "application/json; charset=UTF-8"
                    }
                })
                    .then(response => response.json())
                    .then(json => console.log(json));
                console.warn(response.data);
            } catch (error) {
                console.warn(error);
            }
        };

Answer 3

Answer №2

Ensure that your server-side is sending a response back to the client. You have the option to utilize either res.send or res.json. The method res.send([body]) is utilized for sending an HTTP response to the client, while res.json(body) is used for sending a JSON response.

res.send([body])

res.send(new Buffer('hooray'));
res.send({ example: 'json' });
res.send('<p>some more html</p>');

Example:

var express = require('express')
var app = express()

app.get('/', function (req, res) {
    res.send('hello universe')
})

app.listen(3000)

res.json([body])

res.json(null)
res.json({ user: 'sally' })
res.status(500).json({ error: 'statement' })

Example:

var express = require('express')
var app = express()

app.get('/', function (req, res) {
    res.json({ done: true })
})

app.listen(3000)

References:

Express API reference

Information on Node.js response object methods can be found at res.send and res.json

Answer 4

Ensure that your server-side is sending a response back to the client. You have the option to utilize either res.send or res.json. The method res.send([body]) is utilized for sending an HTTP response to the client, while res.json(body) is used for sending a JSON response.

res.send([body])

res.send(new Buffer('hooray'));
res.send({ example: 'json' });
res.send('<p>some more html</p>');

Example:

var express = require('express')
var app = express()

app.get('/', function (req, res) {
    res.send('hello universe')
})

app.listen(3000)

res.json([body])

res.json(null)
res.json({ user: 'sally' })
res.status(500).json({ error: 'statement' })

Example:

var express = require('express')
var app = express()

app.get('/', function (req, res) {
    res.json({ done: true })
})

app.listen(3000)

References:

Express API reference

Information on Node.js response object methods can be found at res.send and res.json

The response from a post request in Reactjs using axios is coming back empty

Answer №1

Answer №2

Similar questions

Webpack: Failure to Locate Node Modules

What are your thoughts on the practice of utilizing the useState hook within a component to send data to its parent component?

The second Node.js application on my Nginx server is unable to connect to the newly configured port

The combination of Google App Engine API with a static architecture is a powerful

Design an element that stretches across two navigation bars

When using Bcrypt compare(), the result is consistently incorrect

Tips for extracting text from nested elements

What is the significance of the .bin folder located within the node_modules directory? And, could you explain

Utilizing SequelizeJS to incorporate related data through primary keys

NodeJS is not searching for an index.js file

The React task list updates the todo items on change, rather than on submission

Having trouble with running Ionic serve in your Ionic 2 project?

The socket.on() function is not able to receive any data

The challenge of website sizing issues with window scaling and the overlooked initial-scale value in HTML

Updating the state in a different component using React and Typescript

Using Socket.IO in Node.js to distribute information to every connected client

Leveraging jsonp with nodejs and original ajax

JShint malfunctioning

Utilizing React to modify the functionality of elements in the user interface depending on the size of

How can I access other properties of the createMuiTheme function within the theme.ts file in Material UI?