web-dev-qa-db-ja.com

React IE11非同期により予期される}エラーが発生する

私は基本的な反応ウェブアプリのチュートリアルを試していますが、クロムで完全に動作します。ここに私のコードがあります：

_import React, {Component} from 'react';

export default class App extends Component {
  async componentDidMount() {
    const [r1,r2] = await Promise.all([
        fetch('http://api.mywebsite.com/content/cars'),
        fetch('http://api.mywebsite.com/content/aircrafts'),
    ]);
    this.setState({content:await r1.json(),content2: await r2.json()});

  }
  render() {
    if(this.state) {
      console.log(this.state);
    }
    return (
        <div>hello</div>
    )
  }
}
_

これは、Chrome-反応コンポーネントをロードし、データを取得し、状態を設定し、状態をコンソールに出力します。

ただし、このコードはInternet Explorer 11では実行されません。表示されるのは空白のページのみで、開発者ツールではエラーが発生します

「}」が必要です

エラーへのリンクをクリックすると、次のコードセグメントが強調表示されます。

_  _createClass(App, [{
    key: 'componentDidMount',
    value: async function componentDidMount() {
      var _ref = await Promise.all([fetch('http://new.evermight.com/content/index'), fetch('http://new.evermight.com/content/index')]),
          _ref2 = _slicedToArray(_ref, 2),
_

行value: async function componentDidMount() {を指す矢印付き。

Internet Explorer 11でこれを機能させるにはどうすればよいですか？フェッチ呼び出しなどが完了した後にのみsetStateが起動するようにします。待ちの振る舞いが必要です。

[〜＃〜] edit [〜＃〜]

Webpackを使用してプロジェクトをコンパイルしています。そして、それが役立つ場合、ここに私のpackage.jsonファイルがあります：

_{
  "name": "scroll",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "animated": "^0.2.1",
    "es2015": "0.0.0",
    "gsap": "^1.20.3",
    "history": "^4.7.2",
    "jquery": "^3.2.1",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-ga": "^2.4.1",
    "react-router-dom": "^4.2.2",
    "react-scripts": "0.9.5",
    "react-transition-group": "^1.2.0",
    "scrollmagic": "^2.0.5",
    "video-element": "^1.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.25.0",
    "eslint": "^4.13.0",
    "eslint-config-aqua": "^2.0.1",
    "eslint-plugin-react": "^7.5.1",
    "file-loader": "^0.9.0",
    "node-sass": "^3.10.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "url-loader": "^0.5.7",
    "webpack": "^3.8.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
_

そして、ここに私のwebpack.config.jsがあります

_var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {app:'./src/Index.js'},

  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[id].[hash].bundle.js',
  path: '/var/www/html/public/build',
    publicPath: '/build/'
  },
  plugins: [
        // This plugin minifies all the Javascript code of the final bundle

        new UglifyJsPlugin({
          uglifyOptions:{
            mangle:   true,
            compress: {
                warnings: false, // Suppress uglification warnings
            },
          }
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name:      'main', // Move dependencies to our main file
            children:  true, // Look for common dependencies in all children,
            minChunks: 2, // How many times a dependency must come up before being extracted
        })
  ],
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
      { test: /\.scss$/, loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]},
      { test: /\.(jpg|gif|png|otf|eot|woff|svg|ttf)(\?.*)?$/, loader: "file-loader" }
    ]
  }
}
_
reactjsasync-awaitinternet-explorer-11
11
John

実際、私はasyncを取得し、IE11での作業を待ちました。私の質問では、IE11でfetchがサポートされていないという問題もありました。両方の問題を解決するために私がしたことは次のとおりです。 bashターミナルに行き、これを入力しました

npm install --save es6-promise
npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-async-to-generator
npm install --save isomorphic-fetch

次に、次の2行をsrc/Index.jsの先頭に、他のコードの前に追加しました。これは、エントリポイントだからです。

import "babel-polyfill";
import "isomorphic-fetch";

次にwebpackコマンドを実行しましたが、IE11はasync awaitで作成したコードをサポートし、fetchコマンドをサポートしています。

12
John

async-awaitはIEではサポートされていません。

MDNを確認してくださいdocs

代わりにPromisesを使用する必要があります

 componentDidMount() {
    Promise.all([
        fetch('http://api.mywebsite.com/content/cars'),
        fetch('http://api.mywebsite.com/content/aircrafts'),
    ]).then(([r1, r2]) => {
        this.setState({content:r1.json(),content2: r2.json()});
    })

 }

また、IEでプロミスをサポートするには、BlueBirdのようなサードパーティのPolyfillライブラリを使用する必要がありますまたは babel-polyfill

5
Shubham Khatri