web-dev-qa-db-fra.com

la méthode d'extraction n'est pas définie à l'aide de l'extraction ES6 dans React

hé les gars, j'ai un problème avec les fonctions de récupération dans ma première application js.

Voici la structure de mon projet:

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

C'est ce que j'ai installé avec 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

J'utilise 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"
  }
}

C'est le fichier où je construis l'interface utilisateur:

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

Si j'essaie de l'exécuter via le navigateur, il échoue (la méthode fetch n'est pas définie), j'ai également vérifié cette publication répétée ES6 `fetch is undefined` et j'ai inclus l'importation sans succès. J'ai également inclus l'importation es6-promise mais cela échoue aussi.

Qu'est-ce que je fais mal? Est-ce un problème de configuration ou quoi? Quand j'exécute 'npm run build', il n'y a pas d'erreur et le fichier build.js semble être correct.

node.jsreactjsecmascript-6es6-promise
7
mannuk

C'est un défaut exporté, alors ...

import fetch from 'isomorphic-fetch'
23
D. Walsh

Ajouter un polyfill pour cela est la bonne approche. En regardant l’un de mes derniers projets, il vous suffit de faire les importations suivantes; 

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

promise.polyfill();

Il semblerait que l'importation es6-promise ne soit pas encore correcte et nécessite que la méthode .polyfill () soit appelée. Je vous recommande de les placer dans le point d'entrée de l'application, car vous ne devriez les importer qu'une seule fois. 

Je vous recommande également d'inclure le babel polyfill;

import 'babel-polyfill';
2
Tim Reynolds