React Fetch()我的本地节点Express后端;无法返回get请求字符串值

我正在使用节点设置本地后端服务器,并尝试使用 fetch 获取要在我的frontend 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> 在里面 '应用程序。js公司`

这是我的应用程序。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;

这是我的服务器。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}`));

这是我的食物。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;