我正在尝试查询服务器以获取导航项列表,以便我可以在init上构建我的菜单.到目前为止,我已设法在主页上创建一个包含3个内容的静态页面,其中包括标题,侧边栏和内容.侧边栏是不同类型用户的菜单,因此我需要在加载时检索菜单项.

我收到的错误是

只能更新已安装或安装的组件.这通常意味着您在已卸载的组件上调用了setState,replaceState或forceUpdate.这是一个无操作

更新4

所以我将我的api请求移动到index.js文件并尝试添加注释中提到的条件.现在它只是呈现Loading...相同的错误

    import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import 'core-js/fn/promise';

import SideBar from './components/sidebar';
import Header from './components/header';
import HomeContent from './components/home';


function getJSON(url) {
  return get(url).then(JSON.parse);
}

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc …

我在我的项目中使用 Vue CLI 3 和 Vuetify。它在 Chrome 和 iOS 12 上运行良好，但在 IE11 和 iOS Safari < 12 上显示空白页面。 IE11 中的控制台显示：SCRIPT1003: Expected ':'

我认为这是因为 Babel 没有将 ES6 语法（箭头函数、展开等）转换为 ES5 语法。运行 yarn build 后，我仍然在编译后的代码中看到它。

这是我的 babel.config.js：

//bable.config.js
module.exports = {
presets: [
  [ '@vue/app', {
     useBuiltIns: 'entry'
  }]
 ]
}

这是我的.browserslistrc：

//.browserslistrc
> 1%
last 2 versions
not ie <= 8

main.js 是这样的：

// main.js
import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router …

使用 Rollup 时，如何让它同时@babel/preset-env与 和 一起使用@babel/polyfill？提到要添加的文档，useBuiltIns: 'usage'但是当我这样做时require is not defined，控制台中出现错误。以下是我到目前为止所拥有的；有更推荐的设置吗？

汇总.config.js：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';

const dist = './dist/';
const name = 'focusoverlay';

export default {
  input: './src/index.js',
  output: [
    {
      file: `${dist}${name}.cjs.js`,
      format: 'cjs'
    },
    {
      file: `${dist}${name}.esm.js`,
      format: 'esm'
    },
    {
      name: 'FocusOverlay',
      file: `${dist}${name}.js`,
      format: 'umd'
    }
  ],
  plugins: [
      resolve(),
      babel({ exclude: 'node_modules/**' }),
      terser()
  ]
};

.babelrc：

{ …

我正在尝试vuetify/lib使用通常的方法进行引用import Vuetify from "vuetify/lib"，但是当我这样做时，该应用程序在IE11中由于阻塞了SCRIPT1003: Expected ':'。

如果我将引用更改为import Vuetify from "vuetify"-没有/lib部分-它不会引发错误。

请注意，我实际上尚未在任何地方使用 vuetify。我没有一个Vuetify组件或电话；我只是添加库。

现在，表面上看，IE11包含了vuetify并愉快地对其进行了解析，我想使用一些组件。如果我在模板中放置了任何 vuetify组件，则IE11会抛出一条Script1002: Syntax Error消息。

任何人都有建议使它真正起作用吗？

Index.cshtml

<v-app>
  <div id="reportApp"></div>
</v-app>

入口点

// polyfills
import "core-js/stable";
import "regenerator-runtime/runtime";

import Vue from "vue"
import "@mdi/font/css/materialdesignicons.css"
import reportFilter from "./reportFilter.vue"

const options = {
    el: "#reportApp",
    render: h => h(reportFilter)
};

export default new Vue(options);

reportFilter.vue

<template>
    <div>
      <!-- this will throw a syntax error -->
      <v-progress-circular …

我正在尝试为 IE11 填充项目，但无论我做什么，浏览器都会记录这些错误：

开发模式：

SCRIPT1002：_app.js 中的语法错误 (49004,30)

49004 const Component = props => (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_injectIntl__WEBPACK_IMPORTED_MODULE_2__["Context"].Consumer, null, intl => {
        Object(_utils__WEBPACK_IMPORTED_MODULE_1__["invariantIntlContext"])(intl);
        const formattedValue = intl[name](props.value, props);
        if (typeof props.children === 'function') {
            return props.children(formattedValue);
        }
        const Text = intl.textComponent || react__WEBPACK_IMPORTED_MODULE_0__["Fragment"];
        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Text, null, formattedValue);
    }));

建造模式：

SCRIPT1006: 应为 ')'

...function G(e,t,n={})

NextJS doc 说框架 polyfills 中的代码，但这还不够。那还缺什么？

项目文件：

.babelrc

{
  "env": {
    "development": {
      "plugins": [
        [
          "react-intl",
          {
            "messagesDir": "./lang/.messages/"
          }
        ]
      ],
      "presets": [
        [
          "next/babel",
          {
            "@babel/preset-env": {
              "useBuiltIns": …

的两个不同的检出相同导致两个不同版本的代码@巴贝尔/运行时为同一版本的Babel

@babel/runtime 的一个版本是“7.6.3”，其中包含commonJS模块导出

但它的另一个版本是“7.9.2”，其中包含ES2015模块导出 [这个导致问题]

  export default function _extends() {
  ^^^^^^
  SyntaxError: Unexpected token export
      at Module._compile (internal/modules/cjs/loader.js:721:23)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Module.require (internal/modules/cjs/loader.js:690:17)
      at Module.Hook._require.Module.require (/Users/justdial/Desktop/NewT/microsite-b2b/node_modules/require-in-the-middle/index.js:80:39)
      at require (internal/modules/cjs/helpers.js:25:18)
      at Object.call (/Users/<abs-path>/server/webpack:/external "@babel/runtime/helpers/esm/extends":1:18)
      at r (/Users/<abs-path>/server/webpack:/webpack/bootstrap:25:22)

更新：

我将 API 从 更改fetch为XMLHttpRequest，但仍然看到问题。

根据控制台日志，延迟在“ readyState 1 ”（即OPENED）和“ readyState 2 ”（即HEADERS_RECEIVED）之间。

另外，也许值得一提的是，在 Firefox 中它运行良好。

我很感激关于如何调试为什么fetch()在 chrome 中调用需要 1 秒的一些指示。

根据“网络”选项卡，请求只用了 12 毫秒。但是在我的日志和“时间轴”选项卡中fetch()需要 1.06 秒。（以下截图）。

关于如何找出什么是拖延的任何提示fetch()？

网络标签截图：

时间线标签截图：

我无法找到 Babel 编译器无法编译的一组已定义功能。我知道有 babel-polyfill 和 core.js 但我需要知道 babel 编译器无法编译的 es2015 功能的确切名称。

任何帮助，将不胜感激。

谢谢

我得到以下信息Babel error

当 .version 为“2018-09”或未指定时，装饰器插件需要“decoratorsBeforeExport”选项，其值必须是布尔值。..../node_modules/@babel/plugin-proposal-decorators/lib/index.js$inerhits

这是我的babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
    [
        "@babel/plugin-proposal-decorators", 
        { 
            "legacy": true, 
            "decoratorsBeforeExport": false // I tried this with true as well -> no luck either
        }
    ]
 ]
};

这是我正在使用的版本

    ....
"dependencies": {
    "react": "17.0.2",
    "react-native": "0.66.4"
    ...

"devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-decorators": "^7.17.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    ...

我正在使用以下代码在 mouseDown 上滚动滚动元素，并在 mouseUp/mouseOut 上停止滚动。

scrubby(xDir) {
    let dub = setInterval(() => {
      document.getElementById("chart").scrollBy(8 * xDir, 0);
    }, 10);

    this.setState({ dub: dub });
  }

  scrubbyStop() {
    const { dub } = this.state;
    if (dub !== null) {
      clearInterval(dub);
    }
    this.setState({ dub: null });
  }

这适用于除 IE 11 以外的所有地方。在 IE 11 中，我收到以下错误：

TypeError: Object doesn't support property or method 'scrollBy'

当我 console.log 元素时，document.getElementById 以确保我选择了元素。

我正在使用 babel-polyfil

我看到很多与 scrollTo 相关的问题，但不是 scrollBy。有谁知道可能适用于 IE 的任何变通方法、polyfill 或替代方案。