Response from Express is undefined and pending (React frontend)

Question

I'm writing a program where the user inputs a number into a React frontend and a Node.js Express backend gets all possible prime numbers under the user number and responds back with the median element of that prime number array.

Server works and the frontend successfully sends a number to the server, but the server response, when I print it in the console, is:

Promise { <state>: "pending" }
undefined

What am I doing wrong?

Frontend React component:

import React, {Component} from 'react';

class NumberInputField extends Component {

    constructor() {
        super();
        this.state = {
            number: 0,
            errorText: ''
        }

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onChange(e) {
        this.setState({[e.target.name]:e.target.value});
    }

    onError(errText) {
        this.setState((previousState, props) => {
            return { errorText: errText}
        })
    }

    onSubmit(e) {
        e.preventDefault();
        console.log("> Submitting form");
        //console.log(this.state);

        fetch('http://localhost:3000/setprime', {
            method: 'POST',
            body: JSON.stringify(this.state),
        })
        .then(r => {
            console.log(r.json());
        })
        .then(data => {
            console.log(data);
        })
        .catch(e => {
            console.log(e);
            this.onError(e.toString());
        })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <input type="text" name="number" onChange={this.onChange}/>
                    <input type="submit" value="Submit"/>
                </form>
                <p className="errorLabel">{this.state.errorText}</p>
            </div>
        );

    }

}

export default NumberInputField;

server.js

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var serverhelpers = require("./serverhelpers");
var cors = require("cors");

app.use(cors());

app.use ( bodyParser.json( { type: "*/*" } ));

app.post("/setprime", (req, res) => {
    console.log(req.body);
    console.log("Received number " + req.body.number + " from frontend");

    let primes = getAllPrimes(req.body.number);
    let median = getMedianArray(primes);

    console.log("Primes: " + primes);
    console.log("Median: " + median);

    res.setHeader("Content-type", "application/json");
    return res.send(median);
});

app.listen(3000);
console.log("Server listening on port 3000.");

Thank you

Taki · Accepted Answer · 2019-10-25 15:05:19Z

3

the problem is with :

.then(r => {
  console.log(r.json());
})

the return value of r.json() is Promise

youhave to return it :

.then(r => {
  //console.log(r.json());
  return r.json();
})

you should see data logged afterwards.

answered Oct 25, 2019 at 15:05

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Over a year ago

Thanks! So with just the console.log(r.json()) it wasn't completing the print because it's a stream and was still at the beginning, right? Adding return allows the stream read to completion?

Collectives™ on Stack Overflow

Response from Express is undefined and pending (React frontend)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related