javascript - 未处理的拒绝 (TypeError) : Failed to fetch

Question

我开始从事网络开发。
我使用 create-react-app 来创建我的项目。
我现在能够渲染不同的页面并在页面之间建立完美的路线。

现在，我正在尝试添加项目的后端部分。
我正在使用 express 并且可能会使用 MongoDB，但我不知道如何管理从客户端到服务器的调用。
这是我的例子:
1. 在 App.js 我有以下，只是一个简单的登录页面:

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import logo from './logo.svg';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import './App.css';
import api from './api'
import { browserHistory } from 'react-router'

class App extends Component {

  goToUsers () {
    api.login()
  }

  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
          <br />
          <br />
          <TextField hintText="Login" />
          <br />
          <TextField hintText="Password" type="password" />
          <br />
          <br />
          <RaisedButton label="Login" onTouchTap={this.goToUsers}/>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

登录函数显然应该从客户端获取数据，但现在我在 api.js 中只有一个简单的函数，我想集中我的 api 函数:

class Api {
  login () {
    fetch('localhost:3000/users')
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json()
    })
  }
}

export default new Api()

最后是 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { Router, Route, IndexRoute, IndexRedirect, browserHistory, Link } from 'react-router'

import App from './App';
import Users from './users';

injectTapEventPlugin();


ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App} />
    <Route path="/Users" component={Users} />
  </Router>
  , document.getElementById('root'))

为简单起见，我没有复制 users.js 和其他对象，但转到 http://localhost:3000/ 时所有类都可以正常工作或 http://localhost:3000/users

但是，当我单击按钮时，我收到错误 Unhandled Rejection (TypeError): Failed to fetch。

知道我错过了什么吗？

Answer 1

class App extends Component {
  constructor(props) {
    super(props);
    state = { users: null }
  }
  goToUsers() {
    //just put your request directly in the method
    fetch('http://localhost:300/users')
      .then(response => {
        //do something with response
        const users = response.json();
        this.setState({ users })
      })
      .catch(err => {
        throw new Error(err)
      })
  }

  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
          <br />
          <br />
          <TextField hintText="Login" />
          <br />
          <TextField hintText="Password" type="password" />
          <br />
          <br />
          <RaisedButton label="Login" onTouchTap={this.goToUsers}/>
        </div>
      </MuiThemeProvider>
    );
  }
}