从节点获取JSON数组到Reactjs

Question

我正在尝试将localhost:3000/users上的节点服务器上的数组提取到localhost:3000上的反应应用中。 问题是我没有得到反应的数组，也无法获取任何内容。

var express = require('express');
var router = express.Router();
var arr = [{
  id: 1,
  username: "samsepi0l"
}, {
  id: 2,
  username: "D0loresH4ze"
}];

/* GET users listing. */
router.get('/', function(req, res, next) {
  // Comment out this line:
  //res.send('respond with a resource');

  // And insert something like this instead:
  res.json(arr);
});

module.exports = router;

反应App.js

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

class App extends Component {
  state = {users: []}

  componentDidMount() {
    fetch("/users")
      .then( (res) => res.json())   
      .then( (json) => {this.setState({users: json});});
  }

  render() {
    return (
      <div className="App">
        <h1>Users</h1>
        {this.state.users.map(user =>
          <div key={user.id}>{user.username}</div>
        )}
      </div>
    );
  }
}

export default App;

如何获取数组以反应页面？

这是我运行npm服务器时遇到的错误： 未处理的拒绝（SyntaxError）：意外的令牌＆lt;在位置0的JSON中

Answer 1

您应该为 fetch（“/ users”）调用实现端点

router.get('/users', function(req, res, next) {
  console.log('got the response');
  res.json(arr);
});

此外，您需要将前端反应应用与处理请求的服务器快递分开。

您的应用无法使用相同的端口。设置不同的端口。前端为I.E 8000，快速服务器为8080

<强>更新

我设法复制了我认为与您在此处找到的教程相同的教程：https://medium.com/front-end-hacking/calling-express-api-in-react-using-react-script-e19084a76a8a

本教程没有任何问题。您必须在client / package-json

中设置代理部分

"proxy" : "http://localhost:3005"

在bin / www中你必须设置

行

var port = normalizePort(process.env.PORT || '3000');

到

 var port = normalizePort(process.env.PORT || '3005');

最后，您可能需要在服务器package.json

中安装并发依赖项。

最后我附上了教程的树结构