node.js - React Fetch() 我的本地 Node Express 后端；无法返回获取请求字符串值

Question

我正在使用 Node 设置本地后端服务器，我正在尝试使用 fetch获取要在我的前端 react 应用程序中呈现的值。随着所有内容的编译，我已经完成了大部分工作，但是我遇到了获取正确值的问题。或者至少，我认为我做的每件事都是正确的。

目标是使用fetch()在我的 app.js从路由 foo 获取渲染值在 server.js .

我可以从 /foo 得到回复但这不是我发送的。我正在发送一个 json 对象 {text: "Foo"}

但是，我在控制台中收到此消息:App.js:12 Response {type: "basic", url: "http://localhost:3000/foo", redirected: false, status: 200, ok: true, …}

知道我做错了什么吗？

我是否没有在路由之间正确获取或发送对象？如何让“Foo”在 <p>The current state is {this.state.message}</p> 行呈现在 'App.js`

这是我的 app.js:

import React, {Component} from 'react';
import './App.css';

class App extends Component {
    state = {
        message: ""
    };

    componentDidMount() {
        fetch('/foo')
            .then(res => {
                console.log(res);
                return res.json();
                // .then(express => this.setState({ express }))
                // .then(() => console.log(this.state.message));
            });
    }

    render() {
        return (
            <div className="App">
                <h1>Users</h1>
                <p>The current state is {this.state.message}</p>
            </div>
        );
    }
}

export default App;

这是我的 server.js:

const express = require('express');
const users = require('./routes/users');
const foo = require('./routes/foo');

const app = express();
const port = process.env.PORT || 8080;

// Set a route for when commands are processed for users
app.use('/users', users);
app.use('/foo', foo);

app.get('/api/hello', (req, res) => {
    res.send({ express: 'Hello From Express' });
});

app.listen(port, () => console.log(`Listening on port ${port}`));

这是我的 foo.js

let express = require('express');
let router = express.Router();

router.get('/', function(req, res) {
    res.send([{text: "Foo"}]);
});

router.post('/', function(req, res) {
    res.send('POST handler for /foo route.');
});

module.exports = router;

Answer 1

res.json() 仍然返回一个 promise，试试这个:

  componentDidMount() {
    fetch("/foo").then(res =>
      res.json().then(data => {
        console.log("data", JSON.stringify(data, null, 4));
        // here you can set state
        //...
      })
    );
  }