未處理的拒絕（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> 
    ); 
    } 
}