Fetch-Methode ist nicht mit ES6 fetch in React

Question

Hey Leute Ich habe ein Problem mit Abruffunktionen in meiner ersten Reaktion js App definiert.

Das ist die Struktur meines Projekts:

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

Dies ist, was ich mit NPM installiert haben:

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'] 
     } 
     } 
    ] 
    } 
}; 

package.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 ich die UI bauen:

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 es über den Browser, um es auszuführen (Methode holen nicht definiert ist) versagt Ich habe auch checked this related post ES6 `fetch is undefined` und ich habe den Import ohne Erfolg aufgenommen. Ich habe auch es6-promise importiert, aber es scheitert auch.

Was mache ich falsch? Ist es ein Konfigurationsproblem oder was? Wenn ich "npm run build" starte, gibt es keinen Fehler und die build.js scheint in Ordnung zu sein.

Answer 1

Es ist eine exportierte Standard, also ...

import fetch from 'isomorphic-fetch' 

Answer 2

Hinzufügen eines polyfill hierfür der richtige Ansatz ist. Wenn Sie eines meiner neuesten Projekte betrachten, müssen Sie nur die folgenden Importe durchführen:

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

promise.polyfill(); 

Es sieht aus wie Sie nicht ganz die richtige es6-Versprechen Import haben, die die .polyfill() -Methode erfordert aufgerufen werden. Ich würde empfehlen, diese in den Einstiegspunkt der Anwendung zu legen, da Sie sie nur einmal importieren müssen.

Ich würde auch empfehlen, die Babel Polyfill enthalten;

import 'babel-polyfill';