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方法有关，如果我们使用它来解析url（例如“ http://localhost:3000/”），则它用于解析 JSON 字符串，它将在IE浏览器中显示“对象不支持属性或方法'repeat'”，在Edge浏览器中显示“ JSON.parse错误：无效字符”错误。

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

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

对象不支持属性或方法“重复”

此外，由于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; } }

create-react-app中的Polyfill不起作用

1 个答案: