Question

我正在设置一个带节点的本地后端服务器，我正在尝试使用fetch来获取要在我的前端反应应用中呈现的值。我已经完成了大部分工作，因为所有内容都会编译，但是我遇到了获取正确值的问题。或者至少，我认为我正在做的一切。

目标是在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（）仍在返回一个承诺，试试这个：

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

React Fetch（）我的本地Node Express后端;无法返回请求字符串值

1 个答案: