Unbehandelte Ablehnung (TypeError): Fehler beim Abrufen

Question

Ich beginne mit der Web-Entwicklung. Ich habe create-react-app verwendet, um mein Projekt zu erstellen. Ich kann jetzt verschiedene Seiten rendern und Routen zwischen den Seiten haben, die perfekt ist.

Jetzt versuche ich, den Backend-Teil des Projekts hinzuzufügen. Ich benutze Express und werde wahrscheinlich MongoDB verwenden, aber ich kann nicht genau herausfinden, wie man die Anrufe vom Client zum Server verwaltet. Hier ist mein Beispiel: 1. in App.js Ich habe die folgende, nur eine einfache Login-Seite:

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; 

die Login-Funktion offenbar Daten holen vom Client soll aber jetzt habe ich nur ein einfache Funktion in api.js, wo ich meine api Funktionen zentralisieren:

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

export default new Api() 

und schließlich die 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')) 

ich bin Kopieren u nicht sers.js und andere Gegenstände der Einfachheit halber aber alle Klassen funktioniert gut, wenn zu http://localhost:3000/ oder http://localhost:3000/users

aber gehen, wenn ich auf den Button klicken, ich den Fehler Unhandle Rejection (Typeerror) erhalten: Fehler zu holen.

Irgendeine Idee, die ich vermisse?

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