fetch-Methode ist nicht definiert mit ES6 Holen Reagieren

hey Leute ich habe ein Problem mit der fetch-Funktionen in meinem ersten reagieren js-app.

Dies ist der Aufbau meines Projekts:

hello-world
  -- app
     -- components
       -- main.jsx
  -- node_modules
  -- public
     -- build.js
     -- index.html
  -- package.json

Dies ist, was ich installiert über npm:

npm install react react-dom babel-core babel-loader babel-preset-es2015    babel-preset-react webpack --save-dev
npm install --save isomorphic-fetch es6-promise

Ich benutze webpack
webpack.config

module.exports = {
  entry: './app/components/main.jsx',
  output: {
    path: './public/',
    filename: "build.js",
  },
  module: {
    loaders: [
      {
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

Paket.json

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack -w"
  },
  "author": "mannuk",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "webpack": "^1.13.2"
  },
  "dependencies": {
    "es6-promise": "^3.3.1",
    "isomorphic-fetch": "^2.2.1"
  }
}

Dies ist die Datei, wo Baue ich die UI:

main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import 'isomorphic-fetch';
import 'es6-promise';

class Person extends React.Component {

  constructor(props){
    super(props);
    this.state = {people : []};
  }

  componentWillMount(){
    fetch('xxx/people',
      method: 'get',
      headers: {'token' : 'xxx'}
      )
      .then((response) => {
        return response.json()
      })
      .then((people) => {
        this.setState({ people: people })
      })
  }

  render(){
    return <div>
        <input type="text" value={this.state.people[0].name}></input>
      </div>
  }
}

ReactDOM.render(
  <Person/>,
  document.getElementById('container')
);

Wenn ich versuche, führen Sie es durch den browser, es schlägt fehl (fetch-Methode ist nicht definiert) ich habe auch überprüft, bezogenen Beitrag ES6 `fetch ist undefiniert` und ich habe den import ohne Erfolg. Ich habe auch enthalten es6-Versprechen import scheitert aber auch.

Was mache ich falsch? Ist es ein config problem oder was? Wenn ich 'npm führen Sie build' es gibt keine Fehler und die build.js scheint ok zu sein.

warum gehst du nicht importieren Holen mit import fetch from 'isomorphic-fetch'; statt import 'isomorphic-fetch';?
Als seitliche Anmerkung, Sie scheinen zu fehlen die geschweiften Klammern für die Objekt-literal, dass Sie vorbei sind wie eine zweite argument der fetch() nennen. Es sollte fetch('xxx/people', { method: 'get', headers: {'token' : 'xxx'} });
Nicht sicher, ob Sie ausschließen möchten alle node_modules in der Zeile ; löschen: /(node_modules|bower_components)/,
du hast Recht. Idk warum, wenn ich ausführen von npm führen Sie build nicht fehlschlägt, wenn ich die fehlenden geschweiften Klammern...

InformationsquelleAutor mannuk | 2016-09-26

  1. 23

    Es ist eine exportierte Standard, so...

    import fetch from 'isomorphic-fetch'

    InformationsquelleAutor D. Walsh

  2. 2

    Hinzufügen ein polyfill für das ist der richtige Ansatz. Auf der Suche bei einem meiner letzten Projekte, die Sie nur brauchen, um die folgenden imports; 

    import promise from 'es6-promise';
import 'isomorphic-fetch';

promise.polyfill();

    Wie es aussieht, habe nicht ganz bekam die es6-Versprechen import korrigieren erfordert .polyfill () - Methode aufgerufen werden. Ich würde empfehlen, diese in der Einstiegspunkt der Anwendung Sie sollten nur brauchen, um Sie zu importieren einmal.

    Ich würde auch empfehlen, die Sie zählen der babel polyfill;

    import 'babel-polyfill';
    Können Sie mir erklären, was ein polyfill ist?
    Ein polyfill, oder polyfiller, ist ein Stück code (oder ein plugin), das die Technologie, die Sie, die Entwickler erwarten, dass ein browser zu bieten nativ. Dies ist gut abgedeckt remysharp remysharp.com/2010/10/08/what-is-a-polyfill
    danke. Also, wenn ich importieren es6-Versprechen muss ich anrufen Versprechen.polyfill vor der Klasse Person...? Die Lösung, dass @D. Walsh, sofern es funktioniert, und es erfordert nur importieren fetch 'isomorph zu Holen'. Ich erwähne das, weil ich die Säge .polyfill() in einige tutorials, aber idk, warum Sie verwendet wurden.

    InformationsquelleAutor Tim Reynolds

Schreibe einen Kommentar