Javascript react中的延迟加载-组件未加载

有人能解释一下为什么我的延迟加载组件从不加载吗

所看到的只是消息加载。。。在屏幕上…没有错误

下面是我的代码：

import React, { Component, lazy, Suspense } from "react";
import "./App.css";
//const Mycomp = lazy(() => import("./components/myComp"));
const Mycomp = lazy(() => {
  let x = new Promise(
    () => {
      import("./components/myComp");
    },
    e => {
      console.log(e);
    }
  );
  return x;
});

class App extends Component {
  sayHi = () => {
    console.log("supa");
  };

  render() {
    return (
      <Suspense fallback={<div> loading...</div>}>
        <div className="App">
          <header className="App-header">
            <Mycomp />
            <input type="button" value="sayHi" onClick={this.sayHi} />
          </header>
        </div>
      </Suspense>
    );
  }
}

export default App;

import React，{Component，lazy，suspent}来自“React”；
导入“/App.css”；
//constmycop=lazy（（）=>import（“./components/mycop”）；
const Mycomp=懒惰（（）=>{
让x=新的承诺(
() => {
进口（“./components/mycop”）；
},
e=>{
控制台日志（e）；
}
);
返回x；
});
类应用程序扩展组件{
早希=（）=>{
控制台日志（“supa”）；
};
render（）{
返回(
);
}
}
导出默认应用程序；

这只是为了学习。。所以请善待我。。我一般不太熟悉

下面是mycop.jsx的代码：

import React, { Component } from "react";

class Mycomp extends Component {
  state = {};
  render() {
    return <div>Hi i'm loaded now.</div>;
  }
}

export default Mycomp;

import React，{Component}来自“React”；
类mycop扩展组件{
状态={}；
render（）{
你好，我现在已经上膛了。；
}
}
导出默认mycop；

来自react文档

const OtherComponent = React.lazy(() => import('./OtherComponent'));

React.lazy接受一个必须调用动态导入（）的函数。这 必须返回解析为具有默认导出的模块的承诺 含有反应成分的

现在这很微妙，但我认为在你的情况下，你正在返回你自己新创建的承诺，你已经分配给

x

。但是，您没有具体说明此承诺的内容。React需要您返回一个承诺，该承诺解析为具有默认导出的组件

我认为你可以对你的代码做一个小小的改变，让它正常工作

const Mycomp = lazy(() => {
   return import("./components/myComp");
});

动态导入已经返回一个承诺，该承诺解析为具有默认导出的组件，因此我认为您将其包装在您自己的承诺中，而您正在返回的承诺就是放弃它

下面是react文档中的示例

const OtherComponent = React.lazy(() => import('./OtherComponent'));

下面是一些示例代码，演示如何添加超时

const OtherComponent = React.lazy(() => {
  const x = new Promise((resolve) => {
    setTimeout(() => {
      return resolve(import("./Child"))
    }, 1500)
  })
  return x;
});

class App extends Component {
  render() {
    return (
      <div className="App">
        <Suspense fallback={<div>Loading...</div>}>
          <OtherComponent />
        </Suspense>
      </div>
    );
  }
}

const OtherComponent=React.lazy（（）=>{
常数x=新承诺（（解决）=>{
设置超时（（）=>{
返回解析（导入（“/子项”））
}, 1500)
})
返回x；
});
类应用程序扩展组件{
render（）{
返回(
);
}
}

您尝试导入的组件是否有默认导出？@ChaimFriedman yes。我在那里添加了Mycomp组件的代码..您正在导入

Mycomp

组件，而您的组件名称是

Mycomp

。是的，这将起作用。。但基本上我想做的是添加一个setTimeout函数，这样我就可以在大约5秒后加载组件。。。有可能吗？我从没试过。我的猜测是，只要满足lazy函数的要求，就可以做任何事情。尽管如此，我还是很想亲自尝试一下。是的。。我只是在玩弄它。。。但是我不能让它工作。。并且没有要继续的错误消息。。所以有点卡住了（现在启动一个示例项目进行尝试。我可以在CRA中使用这个api吗？是的，我就是这么做的。