Ответ от Express не определен и ожидает ответа (веб-интерфейс React)

Question

Я пишу программу, в которой пользователь вводит число в интерфейс React, а бэкэнд Node.js Express получает все возможные простые числа под номером пользователя и отвечает медианным элементом этого массива простых чисел.

Сервер работает, и интерфейс успешно отправляет номер на сервер, но ответ сервера, когда я печатаю его в консоли:

Promise { <state>: "pending" }
undefined

Что я делаю не так?

Компонент Frontend React:

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.");

Спасибо

Answer 1

проблема в:

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

возвращаемое значение из r.json() равно Promise

вам нужно его вернуть:

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

вы должны увидеть data зарегистрировано позже.