在create-react-app中填充不起作用

Question

我已经导入了react-app-polyfill，但是在我的其中一个componenetDidMounts中，我试图解析window.location.href我遇到了错误。

这是我的index.js

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

这是在IE 11上破坏我的应用程序的代码

  async componentDidMount() {
    const curUrl = window.location.href;
    console.log(JSON.parse(curUrl));
}

[不知道为什么会抛出Object doesn't support property or method 'repeat'错误。感谢您的帮助，谢谢！

这也是我的package.json

{
  "name": "bulkyBOIZ",
  "version": "0.1.0",
  "proxy": "http://localhost:8000",
  "private": true,
  "dependencies": {
    "0s": "^1.0.0",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "amazon-cognito-auth-js": "^1.3.2",
    "aws-sdk": "^2.546.0",
    "axios": "^0.18.1",
    "body-parser": "^1.19.0",
    "date-fns": "^1.30.1",
    "env-cmd": "^10.0.1",
    "express": "^4.17.1",
    "formik": "^1.5.8",
    "glamor": "^2.20.40",
    "lodash": "^4.17.15",
    "react": "^16.8.0",
    "react-app-polyfill": "^1.0.2",
    "react-dom": "^16.8.0",
    "react-dropzone": "^6.0.4",
    "react-infinite-scroller": "^1.2.4",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.2.0",
    "react-scroll-sync": "^0.7.0",
    "react-select": "^2.4.1",
    "react-toastify": "^5.0.0-rc.6",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "winston": "^3.2.1",
    "winston-cloudwatch": "^2.0.9",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:dev": "env-cmd -f .env.development npm run build",
    "build:test": "env-cmd -f .env.test npm run build",
    "build:staging": "env-cmd -f .env.staging npm run build",
    "build:production": "env-cmd -f .env.production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server-dev": "nodemon server/index.js | pino-colada",
    "server": "node server/index.js",
    "dev": "run-p server start"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "axios-mock-adapter": "^1.16.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "enzyme-to-json": "^3.3.5",
    "express-pino-logger": "^4.0.0",
    "nodemon": "^1.19.3",
    "npm-run-all": "^4.1.5",
    "pino-colada": "^1.4.5",
    "react-test-renderer": "^16.8.1",
    "redux-mock-store": "^1.5.3"
  },
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }
}

Answer 1

const curUrl = window.location.href;
console.log(JSON.parse(curUrl));

该问题与JSON.parse方法有关，它用于解析JSON字符串，如果我们使用它来解析url（例如“ http://localhost:3000/”），它将显示“对象在IE浏览器中不支持属性或方法“重复””，在Edge浏览器中不支持“ JSON.parse错误：无效字符”错误。

所以，我建议您如下修改代码：

 const curUrl = window.location.href;
 console.log(curUrl);

对象不支持属性或方法'repeat'

此外，由于String.prototype.repeat() method不支持IE浏览器，如果要在IE浏览器中使用它，请添加以下polyfill：

if (!String.prototype.repeat) {
  String.prototype.repeat = function(count) {
    'use strict';
    if (this == null)
      throw new TypeError('can\'t convert ' + this + ' to object');

    var str = '' + this;
    // To convert string to integer.
    count = +count;
    // Check NaN
    if (count != count)
      count = 0;

    if (count < 0)
      throw new RangeError('repeat count must be non-negative');

    if (count == Infinity)
      throw new RangeError('repeat count must be less than infinity');

    count = Math.floor(count);
    if (str.length == 0 || count == 0)
      return '';

    // Ensuring count is a 31-bit integer allows us to heavily optimize the
    // main part. But anyway, most current (August 2014) browsers can't handle
    // strings 1 << 28 chars or longer, so:
    if (str.length * count >= 1 << 28)
      throw new RangeError('repeat count must not overflow maximum string size');

    var maxCount = str.length * count;
    count = Math.floor(Math.log(count) / Math.log(2));
    while (count) {
       str += str;
       count--;
    }
    str += str.substring(0, maxCount - str.length);
    return str;
  }
}