未处理的拒绝（TypeError）：无法取回

Question

我开始进行网页开发。 我使用create-react-app来创建我的项目。 我现在可以渲染不同的页面，并在页面之间有完美的路线。

现在，我试图添加项目的后端部分。 我使用快递，可能会使用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')) 

我不是抄袭ü sers.js和其他对象为简单但所有类的工作正常时去http://localhost:3000/或http://localhost:3000/users

但是，当我点击按钮，我得到错误未处理的拒绝（TypeError）：无法获取。

任何想法我失踪？

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> 
    ); 
    } 
}