来自 Express 的响应未定义且待处理（React 前端）

Question

我正在编写一个程序，其中用户将一个数字输入到 React 前端，Node.js Express 后端获取用户编号下所有可能的素数，并用该素数数组的中值元素进行响应。

服务器正常工作，前端成功向服务器发送了一个数字，但是当我在控制台中打印时，服务器响应是：

Promise { <state>: "pending" }
undefined

我做错了什么？

前端 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());
})

the return value 中的r.json() 是Promise

你必须退货：

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

您应该会看到 data 之后登录。